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

docs(breaking): update breaking change on tabs (#16707)

Browse Source
This commit is contained in:
Paul Stelzer
2018-12-12 17:40:15 +01:00
committed by Manu MA
parent 585a84f829
commit b6fd440d34
1 changed files with 16 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
angular/BREAKING.md
View File

@ -1440,11 +1440,11 @@ The `ios` and `ios-small` spinner's have been renamed to `lines` and `lines-smal
## Tabs ## Tabs
### Attributes Renamed ### Breaking changes
#### `ion-tabs` #### `ion-tabs`
The attributes to position the tabs, change the tab layout, enable the tab highlight and hide the tabs have been removed The attributes to position the tabs, change the tab layout, enable the tab highlight and hide the tabs have been removed. Instead use [ion-tab-button](#ion-tab-button)
**Old Usage Example:** **Old Usage Example:**
@ -1465,7 +1465,13 @@ The attributes to position the tabs, change the tab layout, enable the tab highl
#### `ion-tab` #### `ion-tab`
The attributes for the tab title, icon, and badge customization have been removed. Instead you can add `<ion-label>` and `<ion-icon>` inside. `ion-tab` is to be wrapped by a `<ion-tab-bar>`. `ion-tab` was removed. Instead you have to use [ion-tab-button](#ion-tab-button).
#### `ion-tab-button`
You can add `<ion-label>` and `<ion-icon>` inside `ion-tab-button`. `ion-tab-button` has to be wrapped by `<ion-tab-bar>`.
The tab attribute defines the route (which should be shown on switching to this tab).
**Old Usage Example:** **Old Usage Example:**
@ -1481,11 +1487,18 @@ The attributes for the tab title, icon, and badge customization have been remove
```html ```html
<ion-tabs> <ion-tabs>
<ion-tab-bar> <ion-tab-bar>
<!-- A route to <current-route>/map must exist -->
<ion-tab-button tab="map" disabled="true"> <ion-tab-button tab="map" disabled="true">
<ion-icon name="map"></ion-icon> <ion-icon name="map"></ion-icon>
<ion-label>Map</ion-label> <ion-label>Map</ion-label>
<ion-badge color="danger">2</ion-badge> <ion-badge color="danger">2</ion-badge>
</ion-tab-button> </ion-tab-button>
<!-- No ion-tab, just a button that looks like a tab -->
<ion-tab-button (click)="schedule()">
<ion-icon name="add"></ion-icon>
<ion-label>Schedule</ion-label>
</ion-tab-button>
</ion-tab-bar> </ion-tab-bar>
</ion-tabs> </ion-tabs>
``` ```