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

fix(radio): remove order override from wp mode, use slot instead

Browse Source 
$radio-wp-order has been removed

Add Radio to breaking changes
This commit is contained in:
Brandy Carney
2017-09-21 13:33:59 -04:00
parent d1cfa0683d
commit 662743f843
2 changed files with 101 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
packages/ionic-angular/BREAKING.md
View File

@ -11,6 +11,7 @@ A list of the breaking changes introduced in Ionic Angular v4.
- [Icon](#icon)
- [Item](#item)
- [Option](#option)
- [Radio](#radio)
- [Segment](#segment)
- [Toolbar](#toolbar)
- [Sass](#sass)
@ -350,6 +351,103 @@ Select's option element should now be written as `<ion-select-option>`. This mak
The class has been renamed from `Option` to `SelectOption` to keep it consistent with the element tag name.
## Radio
### Slot Required
Previously radio was positioned inside of an item automatically or by using `item-left`/`item-right`. It is now required to have a `slot` to be positioned properly.
** Old Usage Example **
```html
<ion-item>
<ion-label>Apple</ion-label>
<ion-radio value="apple"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Grape, checked, disabled</ion-label>
<ion-radio item-left value="grape" checked disabled></ion-radio>
</ion-item>
<ion-item>
<ion-label>Cherry</ion-label>
<ion-radio item-right color="danger" value="cherry"></ion-radio>
</ion-item>
```
** New Usage Example **
```html
<ion-item>
<ion-label>Apple</ion-label>
<ion-radio slot="start" value="apple"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Grape, checked, disabled</ion-label>
<ion-radio slot="start" value="grape" checked disabled></ion-radio>
</ion-item>
<ion-item>
<ion-label>Cherry</ion-label>
<ion-radio slot="end" color="danger" value="cherry"></ion-radio>
</ion-item>
```
### Radio Group
Radio group has been changed to an element. It should now be wrapped around any `<ion-radio>` elements as `<ion-radio-group>`.
** Old Usage Example **
```html
<ion-list radio-group>
<ion-item>
<ion-label>Apple</ion-label>
<ion-radio value="apple"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Grape, checked, disabled</ion-label>
<ion-radio value="grape" checked disabled></ion-radio>
</ion-item>
<ion-item>
<ion-label>Cherry</ion-label>
<ion-radio color="danger" value="cherry"></ion-radio>
</ion-item>
</ion-list>
```
** New Usage Example **
```html
<ion-list>
<ion-radio-group>
<ion-item>
<ion-label>Apple</ion-label>
<ion-radio slot="start" value="apple"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Grape, checked, disabled</ion-label>
<ion-radio slot="start" value="grape" checked disabled></ion-radio>
</ion-item>
<ion-item>
<ion-label>Cherry</ion-label>
<ion-radio slot="start" color="danger" value="cherry"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
```
### Order for Windows
Previously a radio inside of an item in Windows Platform mode would align itself to the start of the item. This has been removed, `slot` should always be used to align a radio inside of an item now.
## Segment
The markup hasn't changed for Segments, but now writing `<ion-segment-button>` will render a native button element inside of it.