javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(item): add item group docs and update breaking changes

Browse Source
This commit is contained in:
Brandy Carney
2018-01-09 10:21:44 -05:00
parent 10e81131e1
commit b07eef63ad
2 changed files with 125 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
packages/core/src/components/item-group/readme.md
View File

@ -1,6 +1,104 @@
# ion-item-group
Item groups are containers that organize similar items together. They can contain item dividers to divide the items into multiple sections.
```html
<ion-item-group>
<ion-item-divider>A</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>B</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:
```html
<ion-item-group>
<ion-item-divider>
Fruits
</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>
Vegetables
</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>
```
<!-- Auto Generated Below -->