1 ion-item-divider
Item dividers are block elements that can be used to separate items in a list. They are similar to list headers, but instead of just being placed at the top of the list, they should be placed between the items.
<ion-list>
<ion-item-group>
<ion-item-divider>
<ion-label> Section A</ion-label>
</ion-item-divider>
<ion-item>
<ion-label>A1</ion-label>
</ion-item>
<ion-item>
<ion-label>A2</ion-label>
</ion-item>
<ion-item lines="none">
<ion-label>A3</ion-label>
</ion-item>
</ion-item-group>
<ion-item-group>
<ion-item-divider>
<ion-label> Section B</ion-label>
</ion-item-divider>
<ion-item>
<ion-label>B1</ion-label>
</ion-item>
<ion-item>
<ion-label>B2</ion-label>
</ion-item>
<ion-item lines="none">
<ion-label>B3</ion-label>
</ion-item>
</ion-item-group>
</ion-list>
1 Theming
<ion-item-divider> <ion-label>Default</ion-label> </ion-item-divider> <ion-item-divider color="primary"> <ion-label>Primary</ion-label> </ion-item-divider> <ion-item-divider color="secondary"> <ion-label>Secondary</ion-label> </ion-item-divider> <ion-item-divider color="tertiary"> <ion-label>Tertiary</ion-label> </ion-item-divider> <ion-item-divider color="success"> <ion-label>Success</ion-label> </ion-item-divider> <ion-item-divider color="warning"> <ion-label>Warning</ion-label> </ion-item-divider> <ion-item-divider color="danger"> <ion-label>Danger</ion-label> </ion-item-divider> <ion-item-divider color="light"> <ion-label>Light</ion-label> </ion-item-divider> <ion-item-divider color="medium"> <ion-label>Medium</ion-label> </ion-item-divider> <ion-item-divider color="dark"> <ion-label>Dark</ion-label> </ion-item-divider>
2 ion-item-group
Item groups are containers that group similar items together. They can contain item dividers, which divide items into parts. They can also be used to group sliding items.
<ion-item-group>
<ion-item-divider>
<ion-label>A</ion-label>
</ion-item-divider>
<ion-item>
<ion-label>Angola</ion-label>
</ion-item>
<ion-item>
<ion-label>Argentina</ion-label>
</ion-item>
<ion-item lines="none">
<ion-label>Armenia</ion-label>
</ion-item>
</ion-item-group>
1 Sliding Items
<ion-item-group>
<ion-item-divider>
<ion-label> Fruits </ion-label>
</ion-item-divider>
<ion-item-sliding>
<ion-item>
<ion-label> Grapes </ion-label>
</ion-item>
<ion-item-options>
<ion-item-option> Favorite </ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding>
<ion-item>
<ion-label> Apples </ion-label>
</ion-item>
<ion-item-options>
<ion-item-option> Favorite </ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding>
<ion-item lines="none">
<ion-label> Bananas </ion-label>
</ion-item>
<ion-item-options>
<ion-item-option> Favorite </ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-item-group>
3 ion-item-sliding
The sliding item contains an item that can be dragged to reveal option buttons. It requires an item as a child. All options to be displayed should be placed in the item-options element.
<ion-list>
<ion-item-sliding>
<ion-item>
<ion-label>Sliding Item with End Options</ion-label>
</ion-item>
<ion-item-options>
<ion-item-option>Favorite</ion-item-option>
<ion-item-option color="danger">Delete</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding>
<ion-item-options side="start">
<ion-item-option color="success">Archive</ion-item-option>
</ion-item-options>
<ion-item>
<ion-label>Sliding Item with Start Options</ion-label>
</ion-item>
</ion-item-sliding>
<ion-item-sliding>
<ion-item-options side="start">
<ion-item-option color="success">Archive</ion-item-option>
</ion-item-options>
<ion-item>
<ion-label>Sliding Item with Options on Both Sides</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option>Favorite</ion-item-option>
<ion-item-option color="danger">Delete</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
1 Icon Options
When an icon is placed alongside text in the item option, it will display the icon on top of the text by default. The slot on the icon can be changed to any of the available item option slots to change its position.
<ion-list>
<ion-item-sliding>
<ion-item-options side="start">
<ion-item-option color="success">
<ion-icon slot="icon-only" name="archive"></ion-icon>
</ion-item-option>
</ion-item-options>
<ion-item>
<ion-label>Sliding Item with Icons Only</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option>
<ion-icon slot="icon-only" name="heart"></ion-icon>
</ion-item-option>
<ion-item-option color="danger">
<ion-icon slot="icon-only" name="trash"></ion-icon>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding>
<ion-item-options side="start">
<ion-item-option color="success">
<ion-icon slot="start" name="archive"></ion-icon>
Archive
</ion-item-option>
</ion-item-options>
<ion-item>
<ion-label> Sliding Item with Start Icons </ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option>
<ion-icon slot="start" name="heart"></ion-icon>
Favorite
</ion-item-option>
<ion-item-option color="danger">
<ion-icon slot="start" name="trash"></ion-icon>
Delete
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding>
<ion-item-options side="start">
<ion-item-option color="success">
<ion-icon slot="end" name="archive"></ion-icon>
Archive
</ion-item-option>
</ion-item-options>
<ion-item>
<ion-label> Sliding Item with End Icons </ion-label>
</ion-item>
<ion-item-options>
<ion-item-option>
<ion-icon slot="end" name="heart"></ion-icon>
Favorite
</ion-item-option>
<ion-item-option color="danger">
<ion-icon slot="end" name="trash"></ion-icon>
Delete
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding>
<ion-item-options side="start">
<ion-item-option color="success">
<ion-icon slot="top" name="archive"></ion-icon>
Archive
</ion-item-option>
</ion-item-options>
<ion-item>
<ion-label> Sliding Item with Top Icons </ion-label>
</ion-item>
<ion-item-options>
<ion-item-option>
<ion-icon slot="top" name="heart"></ion-icon>
Favorite
</ion-item-option>
<ion-item-option color="danger">
<ion-icon slot="top" name="trash"></ion-icon>
Delete
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding>
<ion-item-options side="start">
<ion-item-option color="success">
<ion-icon slot="bottom" name="archive"></ion-icon>
Archive
</ion-item-option>
</ion-item-options>
<ion-item>
<ion-label> Sliding Item with Bottom Icons </ion-label>
</ion-item>
<ion-item-options>
<ion-item-option>
<ion-icon slot="bottom" name="heart"></ion-icon>
Favorite
</ion-item-option>
<ion-item-option color="danger">
<ion-icon slot="bottom" name="trash"></ion-icon>
Delete
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
2 Expandable Options
If you slide past a certain point, Options can expand to take up the full width of the parent ion-item. This can be combined with the ionSwipe event on the item option so that the method is called when the item is fully slid.
<ion-list>
<ion-item-sliding>
<ion-item-options side="start">
<ion-item-option color="success" expandable>Archive</ion-item-option>
</ion-item-options>
<ion-item>
<ion-label>Sliding Item with Expandable Options</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option>Favorite</ion-item-option>
<ion-item-option color="danger" expandable>Delete</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
4 ion-label
Label is an element mainly used to add text content to the Item component. When specifying a visible label, the label can also be used inside a form control component such as Input or Radio, but this is not required.
The label’s position inside the project can be inline, fixed, stacked, or floating.
<ion-label>Label</ion-label>
<ion-item>
<ion-label>Default Label</ion-label>
</ion-item>
<ion-item>
<ion-label>
Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
</ion-label>
</ion-item>
<ion-item>
<ion-label class="ion-text-wrap">
Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
</ion-label>
</ion-item>
<ion-item>
<ion-label>
<h1>Heading</h1>
<p>Paragraph</p>
</ion-label>
</ion-item>
1 Theming
<ion-label>Default</ion-label> <ion-label color="primary">Primary</ion-label> <ion-label color="secondary">Secondary</ion-label> <ion-label color="tertiary">Tertiary</ion-label> <ion-label color="success">Success</ion-label> <ion-label color="warning">Warning</ion-label> <ion-label color="danger">Danger</ion-label> <ion-label color="light">Light</ion-label> <ion-label color="medium">Medium</ion-label> <ion-label color="dark">Dark</ion-label>
5 ion-note
Annotations are text elements typically used as subtitles that provide more information. By default, their styles appear gray. Annotations can be used in projects as metadata text.
<ion-label>Label</ion-label> Note (End) Note (Start) <ion-label>Label</ion-label>