Skip to main content
Version: v8

ion-list

Lists are made up of multiple rows of items which can contain text, buttons, toggles, icons, thumbnails, and much more. Lists generally contain items with similar data content, such as images and text.

Lists support several interactions including swiping items to reveal options, dragging to reorder items within the list, and deleting items.

Basic Usage

<ion-list>
<ion-item>
<ion-label>Pokémon Yellow</ion-label>
</ion-item>
<ion-item>
<ion-label>Mega Man X</ion-label>
</ion-item>
<ion-item>
<ion-label>The Legend of Zelda</ion-label>
</ion-item>
<ion-item>
<ion-label>Pac-Man</ion-label>
</ion-item>
<ion-item>
<ion-label>Super Mario World</ion-label>
</ion-item>
</ion-list>

Inset List

Adding the inset property to a list will apply margin around the list. In ios mode it will also add rounded corners to the list.

<ion-content color="light">
<ion-list [inset]="true">
<ion-item>
<ion-label>Pokémon Yellow</ion-label>
</ion-item>
<ion-item>
<ion-label>Mega Man X</ion-label>
</ion-item>
<ion-item>
<ion-label>The Legend of Zelda</ion-label>
</ion-item>
<ion-item>
<ion-label>Pac-Man</ion-label>
</ion-item>
<ion-item>
<ion-label>Super Mario World</ion-label>
</ion-item>
</ion-list>
</ion-content>

List Lines

Adding the lines property to a list will adjust the bottom borders of all of the items in the list. Setting it to "full" will display full width borders, "inset" will display borders adjusted with left padding, and "none" will show no borders. If the lines property is set on an item in a list, that will take priority over the property on the list.

<ion-list lines="full">
<ion-item>
<ion-label>Full Lines</ion-label>
</ion-item>
<ion-item>
<ion-label>Full Lines</ion-label>
</ion-item>
<ion-item>
<ion-label>Full Lines</ion-label>
</ion-item>
</ion-list>

<ion-list lines="inset">
<ion-item>
<ion-label>Inset Lines</ion-label>
</ion-item>
<ion-item>
<ion-label>Inset Lines</ion-label>
</ion-item>
<ion-item>
<ion-label>Inset Lines</ion-label>
</ion-item>
</ion-list>

<ion-list lines="none">
<ion-item>
<ion-label>No Lines</ion-label>
</ion-item>
<ion-item>
<ion-label>No Lines</ion-label>
</ion-item>
<ion-item>
<ion-label>No Lines</ion-label>
</ion-item>
</ion-list>

Properties

inset

DescriptionIf true, the list will have margin around it and rounded corners.
Attributeinset
Typeboolean
Defaultfalse

lines

DescriptionHow the bottom border should be displayed on all items.
Attributelines
Type"full" | "inset" | "none" | undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

Events

No events available for this component.

Methods

closeSlidingItems

DescriptionIf ion-item-sliding are used inside the list, this method closes any open sliding item.

Returns true if an actual ion-item-sliding is closed.
SignaturecloseSlidingItems() => Promise<boolean>

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

No CSS custom properties available for this component.

Slots

No slots available for this component.