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

docs(tabs): Add changes after refactor (#16699)

Browse Source
This commit is contained in:
Paul Stelzer
2018-12-12 15:06:27 +01:00
committed by Manu MA
parent c60adf8bd4
commit 3e15402408
7 changed files with 99 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
angular/BREAKING.md
View File

@ -1444,14 +1444,7 @@ The `ios` and `ios-small` spinner's have been renamed to `lines` and `lines-smal
#### `ion-tabs`
The attributes to position the tabs, change the tab layout, enable the tab highlight and hide the tabs have been renamed.
| Old Property | New Property | Notes |
|---------------------|----------------------|-------------------------------------------------|
| `tabsHighlight` | `tabbarHighlight` | |
| `tabsLayout` | `tabbarLayout` | Value `title-hide` was renamed to `label-hide` |
| `tabsPlacement` | `tabbarPlacement` | |
| `hidden` | `tabbarHidden` | |
The attributes to position the tabs, change the tab layout, enable the tab highlight and hide the tabs have been removed
**Old Usage Example:**
@ -1464,7 +1457,7 @@ The attributes to position the tabs, change the tab layout, enable the tab highl
**New Usage Example:**
```html
<ion-tabs tabbarLayout="icon-top" tabbarPlacement="bottom" tabbarHighlight="true" tabbarHidden>
<ion-tabs>
...
</ion-tabs>
```
@ -1472,16 +1465,7 @@ The attributes to position the tabs, change the tab layout, enable the tab highl
#### `ion-tab`
The attributes for the tab title, icon, and badge customization have been renamed.
| Old Property | New Property |
|---------------------|----------------------|
| `tabTitle` | `label` |
| `tabIcon` | `icon` |
| `tabBadge` | `badge` |
| `tabBadgeStyle` | `badgeColor` |
| `enabled` | `disabled` |
| `tabUrlPath` | `href` |
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>`.
**Old Usage Example:**
@ -1496,8 +1480,13 @@ The attributes for the tab title, icon, and badge customization have been rename
```html
<ion-tabs>
<ion-tab label="Schedule" icon="add"></ion-tab>
<ion-tab label="Map" icon="map" badge="2" badgeColor="danger" disabled="true"></ion-tab>
<ion-tab-bar>
<ion-tab-button tab="map" disabled="true">
<ion-icon name="map"></ion-icon>
<ion-label>Map</ion-label>
<ion-badge color="danger">2</ion-badge>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
```

22
core/src/components/tab-bar/readme.md
View File

@ -8,7 +8,27 @@ The tab bar is a UI component that contains a set of [tab buttons](../tab-button
## Usage
### Angular / javascript
### Angular
```html
<ion-tabs>
<!-- Tab bar -->
<ion-tab-bar slot="bottom">
<ion-tab-button tab="account">
<ion-icon name="person"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="contact">
<ion-icon name="call"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="settings">
<ion-icon name="settings"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
```
### Javascript
```html
<ion-tabs>

5
core/src/components/tab-bar/usage/angular.md
View File

@ -1,10 +1,5 @@
```html
<ion-tabs>
<!-- Tab views -->
<ion-tab tab="account"></ion-tab>
<ion-tab tab="contact"></ion-tab>
<ion-tab tab="settings"></ion-tab>
<!-- Tab bar -->
<ion-tab-bar slot="bottom">
<ion-tab-button tab="account">

31
core/src/components/tab-button/readme.md
View File

@ -10,6 +10,37 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
## Usage
### Angular
```html
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule">
<ion-icon name="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
</ion-tab-button>
<ion-tab-button tab="speakers">
<ion-icon name="contacts"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>
<ion-tab-button tab="map">
<ion-icon name="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>
<ion-tab-button tab="about">
<ion-icon name="information-circle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
```
### Javascript
```html

27
core/src/components/tab-button/usage/angular.md Normal file
View File

@ -0,0 +1,27 @@
```html
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule">
<ion-icon name="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
</ion-tab-button>
<ion-tab-button tab="speakers">
<ion-icon name="contacts"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>
<ion-tab-button tab="map">
<ion-icon name="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>
<ion-tab-button tab="about">
<ion-icon name="information-circle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
```

34
core/src/components/tabs/readme.md
View File

@ -66,21 +66,17 @@ Would match the following tab:
### Angular Router integration
Using tabs with Angular's router is fairly straight forward. The only additional requirement is that an href is supplied to update the browser URL. In this way, the correct `ion-tab` is selected, and the URl is updated.
Using tabs with Angular's router is fairly straight forward. Here you only need to define tab which is the reference to the route.
```html
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
<ion-tab-button tab="schedule">
<ion-icon name="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
</ion-tab-button>
</ion-tab-bar>
<ion-tab tab="schedule">
<ion-router-outlet name="schedule"></ion-router-outlet>
</ion-tab>
</ion-tabs>
```
@ -93,46 +89,28 @@ Using tabs with Angular's router is fairly straight forward. The only additional
```html
<ion-tabs>
<ion-tab tab="schedule">
<ion-router-outlet name="schedule"></ion-router-outlet>
</ion-tab>
<ion-tab tab="speakers">
<ion-router-outlet name="speakers"></ion-router-outlet>
</ion-tab>
<ion-tab tab="map">
<ion-router-outlet name="map"></ion-router-outlet>
</ion-tab>
<ion-tab tab="about">
<ion-router-outlet name="about"></ion-router-outlet>
</ion-tab>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
<ion-tab-button tab="schedule">
<ion-icon name="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
<ion-badge>6</ion-badge>
</ion-tab-button>
<ion-tab-button tab="speakers" href="/app/tabs/(speakers:speakers)">
<ion-tab-button tab="speakers">
<ion-icon name="contacts"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>
<ion-tab-button tab="map" href="/app/tabs/(map:map)">
<ion-tab-button tab="map">
<ion-icon name="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>
<ion-tab-button tab="about" href="/app/tabs/(about:about)">
<ion-tab-button tab="about">
<ion-icon name="information-circle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
```

26
core/src/components/tabs/usage/angular.md
View File

@ -1,44 +1,26 @@
```html
<ion-tabs>
<ion-tab tab="schedule">
<ion-router-outlet name="schedule"></ion-router-outlet>
</ion-tab>
<ion-tab tab="speakers">
<ion-router-outlet name="speakers"></ion-router-outlet>
</ion-tab>
<ion-tab tab="map">
<ion-router-outlet name="map"></ion-router-outlet>
</ion-tab>
<ion-tab tab="about">
<ion-router-outlet name="about"></ion-router-outlet>
</ion-tab>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
<ion-tab-button tab="schedule">
<ion-icon name="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
<ion-badge>6</ion-badge>
</ion-tab-button>
<ion-tab-button tab="speakers" href="/app/tabs/(speakers:speakers)">
<ion-tab-button tab="speakers">
<ion-icon name="contacts"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>
<ion-tab-button tab="map" href="/app/tabs/(map:map)">
<ion-tab-button tab="map">
<ion-icon name="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>
<ion-tab-button tab="about" href="/app/tabs/(about:about)">
<ion-tab-button tab="about">
<ion-icon name="information-circle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
```