javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +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

28
BREAKING.md
View File

@ -13,6 +13,8 @@ A list of the breaking changes introduced in Ionic Angular v4.
- [Icon](#icon)
- [Input](#Input)
- [Item](#item)
- [Item Divider](#item-divider)
- [List Header](#list-header)
- [Nav](#nav)
- [Option](#option)
- [Radio](#radio)
@ -332,7 +334,7 @@ Item should now be written as an `<ion-item>` element. Ionic will determine when
### Label Required
Previously an `ion-label` would automatically get added to an `ion-item`, `ion-item-divider` and `ion-list-header` if one wasn't provided. Now an `ion-label` should always be added if the component is used to display text.
Previously an `ion-label` would automatically get added to an `ion-item` if one wasn't provided. Now an `ion-label` should always be added if the component is used to display text.
```html
<ion-item>
@ -378,6 +380,30 @@ These have been renamed to the following:
</ion-item>
```
## Item Divider
### Label Required
Previously an `ion-label` would automatically get added to an `ion-item-divider` if one wasn't provided. Now an `ion-label` should always be added if the component is used to display text.
```html
<ion-item-divider>
<ion-label>Item Divider Label</ion-label>
</ion-item-divider>
```
## List Header
### Label Required
Previously an `ion-label` would automatically get added to an `ion-list-header` if one wasn't provided. Now an `ion-label` should always be added if the component is used to display text.
```html
<ion-list-header>
<ion-label>List Header Label</ion-label>
</ion-list-header>
```
## Nav
### Method renamed

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 -->