| 1 | ---
|
| 2 | title: TabBar
|
| 3 | preview: https://didi.github.io/mand-mobile/examples/#/tab-bar
|
| 4 | ---
|
| 5 |
|
| 6 | To create a tab bar without a content area
|
| 7 |
|
| 8 | ### Import
|
| 9 |
|
| 10 | ```javascript
|
| 11 | import { TabBar } from 'mand-mobile'
|
| 12 |
|
| 13 | Vue.component(TabBar.name, TabBar)
|
| 14 | ```
|
| 15 |
|
| 16 | ### Code Examples
|
| 17 |
|
| 18 |
|
| 19 | ### API
|
| 20 |
|
| 21 | #### TabBar Props
|
| 22 | |Props | Description | Type | Default | Note|
|
| 23 | |----|-----|------|------|------|
|
| 24 | | v-model | key of selected menu | String | - | - |
|
| 25 | |items|menus data|Array<{name: String, label: String, disabled: Boolean}>|-|-|
|
| 26 | | has-ink | display underline ink bar | Boolean | `true` | - |
|
| 27 | | ink-length | the width of ink bar | Number | `80` | the percentage width of ink bar, between `0-100` |
|
| 28 | |immediate|trigger a `change` event immediately after initialization|Boolean|`false`|-|
|
| 29 |
|
| 30 | #### TabBar Methods
|
| 31 |
|
| 32 | ##### reflow(index)
|
| 33 | relayout tabbar
|
| 34 |
|
| 35 | #### TabBar Events
|
| 36 |
|
| 37 | ##### @change(item, index, prevIndex)
|
| 38 | selected menu index changes
|
| 39 |
|
| 40 | |Props | Description | Type|
|
| 41 | |----|-----|------|
|
| 42 | | item | object of previous selected menu | Object |
|
| 43 | | index | index of current selected menu | Number |
|
| 44 | | index | index of previous selected menu | Number |
|
| 45 |
|
| 46 | #### TabBar Slot
|
| 47 | ```javascript
|
| 48 | <md-tab-bar>
|
| 49 | <template slot="item" slot-scope="{ item, currentName, index, items }">
|
| 50 |
|
| 51 | </template>
|
| 52 | </md-tab-bar>
|
| 53 | ```
|