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
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`:
```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>
```
See the [Tabs API Docs](../Tabs/) for more details on configuring Tabs.
<!-- 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>
```