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

doc(): add new docs around tabs

Browse Source
This commit is contained in:
mhartington
2018-11-01 10:50:35 -04:00
parent be51187a9c
commit 0f9faf8eed
5 changed files with 124 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,25 +1,8 @@
# ion-tab-bar # ion-tab-bar
Tab bar is the UI component that implements the array of button of `ion-tabs`. It's provided by default when `ion-tabs` is used, though, this "implicit" tab bar can not be customized. Tab bar is a UI component that hold the array of [tab buttons](../tab-button). The Tab bar can provide a global setting for different tab/icon layouts as well as different positions for the bar itself.
In order to have a custom tab bar, it should be provided in user's markup as direct children of `ion-tabs`: See the [Tabs API Docs](../Tabs/) for more details on configuring Tabs.
```html
<style>
ion-tab-bar {
font-size: 20px;
}
</style>
<ion-tabs>
<!-- User tabs -->
<ion-tab></ion-tab>
<ion-tab></ion-tab>
<!-- User provided ion-tab-bar that can be customized -->
<ion-tab-bar color="dark" layout="icon-only">
</ion-tabs>
```
<!-- Auto Generated Below --> <!-- Auto Generated Below -->

43
core/src/components/tab-button/usage/javascript.md Normal file
View File

@ -0,0 +1,43 @@
```html
<ion-tabs>
<ion-tab-bar>
<ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
<ion-icon name="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
</ion-tab-button>
<ion-tab-button tab="speakers" href="/app/tabs/(speakers: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-icon name="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>
<ion-tab-button tab="about" href="/app/tabs/(about:about)">
<ion-icon name="information-circle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
<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-tabs>
```

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

@ -43,7 +43,7 @@ In order to link the button to the `ion-tab` container, a matching `tab` propert
This `ion-tab-button` and `ion-tab` are now linked by the common `tab` property. This `ion-tab-button` and `ion-tab` are now linked by the common `tab` property.
The `tab` property identifies each tab, and it has to be unique within the scope of the same `ion-tabs`. It's very important to set the same property to `ion-tab` and `ion-tab-button`, even if you are only using one. e.g. You could use the `ion-tab-bar` without using `ion-tabs`. In this case you should still give each `ion-tab` the property of `tab="something"`. The `tab` property identifies each tab, and it has to be unique within the scope of the same `ion-tabs`. It's important to set the same property to `ion-tab` and `ion-tab-button`, even if you are only using one. e.g. You could use the `ion-tab-bar` without using `ion-tabs`. In this case you should still give each `ion-tab` the property of `tab="something"`.
### Router integration ### Router integration
@ -61,6 +61,26 @@ Would match the following tab:
<ion-tab tab="settings" component="settings-component"></ion-tab> <ion-tab tab="settings" component="settings-component"></ion-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.
```html
<ion-tabs>
<ion-tab-bar>
<ion-tab-button tab="schedule" href="/app/tabs/(schedule: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>
```
<!-- Auto Generated Below --> <!-- Auto Generated Below -->

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

@ -1,16 +1,43 @@
```html ```html
<ion-tabs> <ion-tabs>
<ion-tab label="Schedule" icon="calendar" href="/app/tabs/(schedule:schedule)">
<ion-router-outlet stack name="schedule"></ion-router-outlet> <ion-tab-bar>
<ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
<ion-icon name="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
</ion-tab-button>
<ion-tab-button tab="speakers" href="/app/tabs/(speakers: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-icon name="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>
<ion-tab-button tab="about" href="/app/tabs/(about:about)">
<ion-icon name="information-circle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
<ion-tab tab="schedule">
<ion-router-outlet name="schedule"></ion-router-outlet>
</ion-tab> </ion-tab>
<ion-tab label="Speakers" icon="contacts" href="/app/tabs/(speakers:speakers)">
<ion-router-outlet stack name="speakers"></ion-router-outlet> <ion-tab tab="speakers">
<ion-router-outlet name="speakers"></ion-router-outlet>
</ion-tab> </ion-tab>
<ion-tab label="Map" icon="map" href="/app/tabs/(map:map)">
<ion-router-outlet stack name="map"></ion-router-outlet> <ion-tab tab="map">
<ion-router-outlet name="map"></ion-router-outlet>
</ion-tab> </ion-tab>
<ion-tab label="About" icon="information-circle" href="/app/tabs/(about:about)">
<ion-router-outlet stack name="about"></ion-router-outlet> <ion-tab tab="about">
<ion-router-outlet name="about"></ion-router-outlet>
</ion-tab> </ion-tab>
</ion-tabs> </ion-tabs>
``` ```

27
core/src/components/tabs/usage/javascript.md
View File

@ -1,12 +1,31 @@
```html ```html
<ion-tabs> <ion-tabs>
<ion-tab label="schedule" icon="calendar" name="tab-schedule"> <ion-tab tab="tab-schedule">
<ion-nav></ion-nav> <ion-nav></ion-nav>
</ion-tab> </ion-tab>
<ion-tab label="speakers" icon="contacts" name="tab-speaker"> <ion-tab tab="tab-speaker">
<ion-nav></ion-nav> <ion-nav></ion-nav>
</ion-tab> </ion-tab>
<ion-tab label="map" icon="map" component="page-map"></ion-tab> <ion-tab tab="tab-map" component="page-map"></ion-tab>
<ion-tab label="about" icon="information-circle" component="page-about"></ion-tab> <ion-tab tab="tab-about" component="page-about"></ion-tab>
<ion-tab-bar>
<ion-tab-button tab="tab-schedule">
<ion-icon name="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab-speaker">
<ion-icon name="contacts"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab-map">
<ion-icon name="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab-about">
<ion-icon name="information-circle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs> </ion-tabs>
``` ```