Skip to main content
Version: v5

ion-item-group

Item groups are containers that organize similar items together. They can contain item dividers to divide the items into multiple sections. They can also be used to group sliding items.

Usage

<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>
<ion-label>Armenia</ion-label>
</ion-item>
</ion-item-group>

<ion-item-group>
<ion-item-divider>
<ion-label>B</ion-label>
</ion-item-divider>

<ion-item>
<ion-label>Bangladesh</ion-label>
</ion-item>
<ion-item>
<ion-label>Belarus</ion-label>
</ion-item>
<ion-item>
<ion-label>Belgium</ion-label>
</ion-item>
</ion-item-group>

<!-- They can also be used to group sliding items -->
<ion-item-group>
<ion-item-divider>
<ion-label> Fruits </ion-label>
</ion-item-divider>

<ion-item-sliding>
<ion-item>
<ion-label>
<h3>Grapes</h3>
</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>
<h3>Apples</h3>
</ion-label>
</ion-item>
<ion-item-options>
<ion-item-option> Favorite </ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-item-group>

<ion-item-group>
<ion-item-divider>
<ion-label> Vegetables </ion-label>
</ion-item-divider>

<ion-item-sliding>
<ion-item>
<ion-label>
<h3>Carrots</h3>
</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>
<h3>Celery</h3>
</ion-label>
</ion-item>
<ion-item-options>
<ion-item-option> Favorite </ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-item-group>