メインコンテンツまでスキップ
Version: v6

ion-item-group

Contents

Item groupsは、類似したItemをまとめて整理するコンテナです。Itemを複数のセクションに分割するitem dividersを含めることができます。また、スライドするアイテムをグループ化するためにも使用できます。

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>