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>

Properties

No properties available for this component.

Events

No events available for this component.

Methods

No public methods available for this component.

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.