mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
docs(breaking): alert, actionsheet
This commit is contained in:
77
BREAKING.md
77
BREAKING.md
@ -3,6 +3,8 @@
|
|||||||
|
|
||||||
A list of the breaking changes introduced in Ionic Angular v4.
|
A list of the breaking changes introduced in Ionic Angular v4.
|
||||||
|
|
||||||
|
- [Alert](#alert)
|
||||||
|
- [Action Sheet](#action-sheet)
|
||||||
- [Dynamic Mode](#dynamic-mode)
|
- [Dynamic Mode](#dynamic-mode)
|
||||||
- [Button](#button)
|
- [Button](#button)
|
||||||
- [Chip](#chip)
|
- [Chip](#chip)
|
||||||
@ -25,9 +27,57 @@ A list of the breaking changes introduced in Ionic Angular v4.
|
|||||||
- [Select](#select)
|
- [Select](#select)
|
||||||
- [Spinner](#spinner)
|
- [Spinner](#spinner)
|
||||||
- [Text / Typography](#text--typography)
|
- [Text / Typography](#text--typography)
|
||||||
|
- [Tabs](#tabs)
|
||||||
- [Theming](#theming)
|
- [Theming](#theming)
|
||||||
- [Toolbar](#toolbar)
|
- [Toolbar](#toolbar)
|
||||||
|
|
||||||
|
## Alert
|
||||||
|
|
||||||
|
The `title` and `subTitle` properties has been renamed to `header` and `subHeader` respectivelly.
|
||||||
|
|
||||||
|
**Old Usage Example:**
|
||||||
|
|
||||||
|
```js
|
||||||
|
const alert = await alertCtrl.create({
|
||||||
|
title: 'This is the title',
|
||||||
|
subTitle: 'this is the sub title'
|
||||||
|
});
|
||||||
|
await alert.present();
|
||||||
|
```
|
||||||
|
|
||||||
|
**New Usage Example:**
|
||||||
|
|
||||||
|
```js
|
||||||
|
const alert = await alertCtrl.create({
|
||||||
|
header: 'This is the title',
|
||||||
|
subHeader: 'this is the sub title'
|
||||||
|
});
|
||||||
|
await alert.present();
|
||||||
|
```
|
||||||
|
|
||||||
|
## Action Sheet
|
||||||
|
|
||||||
|
The `title` and `subTitle` properties has been renamed to `header` and `subHeader` respectivelly.
|
||||||
|
|
||||||
|
**Old Usage Example:**
|
||||||
|
|
||||||
|
```js
|
||||||
|
const actionSheet = await actionSheetCtrl.create({
|
||||||
|
title: 'This is the title',
|
||||||
|
subTitle: 'this is the sub title'
|
||||||
|
});
|
||||||
|
await actionSheet.present();
|
||||||
|
```
|
||||||
|
|
||||||
|
**New Usage Example:**
|
||||||
|
|
||||||
|
```js
|
||||||
|
const actionSheet = await actionSheetCtrl.create({
|
||||||
|
header: 'This is the title',
|
||||||
|
subHeader: 'this is the sub title'
|
||||||
|
});
|
||||||
|
await actionSheet.present();
|
||||||
|
```
|
||||||
|
|
||||||
## Dynamic Mode
|
## Dynamic Mode
|
||||||
|
|
||||||
@ -873,6 +923,33 @@ Typography should now be written as an `<ion-text>` element. Previously the `ion
|
|||||||
</p>
|
</p>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Tab
|
||||||
|
|
||||||
|
Some properties in `ion-tab` changed:
|
||||||
|
|
||||||
|
- [tabTitle] -> [label]
|
||||||
|
- [tabIcon] -> [icon]
|
||||||
|
- [tabBadge] -> [badge]
|
||||||
|
- [tabBadgeStyle] -> [badgeStyle]
|
||||||
|
|
||||||
|
**Old Usage Example:**
|
||||||
|
|
||||||
|
```html
|
||||||
|
<ion-tabs>
|
||||||
|
<ion-tab tabTitle="Schedule" tabIcon="add"></ion-tab>
|
||||||
|
<ion-tab tabTitle="Map" tabIcon="mao" tabBadge="2"></ion-tab>
|
||||||
|
</ion-tabs>
|
||||||
|
```
|
||||||
|
|
||||||
|
**New Usage Example:**
|
||||||
|
|
||||||
|
```html
|
||||||
|
<ion-tabs>
|
||||||
|
<ion-tab label="Schedule" icon="add"></ion-tab>
|
||||||
|
<ion-tab label="Map" icon="mao" badge="2"></ion-tab>
|
||||||
|
</ion-tabs>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
## Theming
|
## Theming
|
||||||
|
|
||||||
|
@ -149,8 +149,8 @@ export class Button {
|
|||||||
disabled={this.disabled}
|
disabled={this.disabled}
|
||||||
onFocus={this.onFocus.bind(this)}
|
onFocus={this.onFocus.bind(this)}
|
||||||
onKeyUp={this.onKeyUp.bind(this)}
|
onKeyUp={this.onKeyUp.bind(this)}
|
||||||
onClick={(ev) => openURL(this.href, ev, this.goBack)}
|
onBlur={this.onBlur.bind(this)}
|
||||||
onBlur={this.onBlur.bind(this)}>
|
onClick={(ev) => openURL(this.href, ev, this.goBack)}>
|
||||||
<span class='button-inner'>
|
<span class='button-inner'>
|
||||||
<slot name='icon-only'></slot>
|
<slot name='icon-only'></slot>
|
||||||
<slot name='start'></slot>
|
<slot name='start'></slot>
|
||||||
|
Reference in New Issue
Block a user