48 lines
1006 B
Markdown
48 lines
1006 B
Markdown
---
|
|
title: Tabs
|
|
preview: https://didi.github.io/mand-mobile/examples/#/tabs
|
|
---
|
|
|
|
To create a tab page with a content area
|
|
|
|
### Import
|
|
|
|
```javascript
|
|
import { Tabs, TabPane } from 'mand-mobile'
|
|
|
|
Vue.component(Tabs.name, Tabs)
|
|
Vue.component(TabPane.name, TabPane)
|
|
```
|
|
|
|
### Code Examples
|
|
<!-- DEMO -->
|
|
|
|
### API
|
|
|
|
#### Tabs Props
|
|
|Props | Description | Type | Default | Note|
|
|
|----|-----|------|------|------|
|
|
|v-model|name of selected tab|String|-|-|
|
|
|immediate|trigger a `change` event immediately after initialization|Boolean|`false`|-|
|
|
|
|
#### TabPane Props
|
|
|Props | Description | Type | Default | Note|
|
|
|----|-----|------|------|------|
|
|
|name|unique name|String|-|required|
|
|
|label|tab label|String|-|required|
|
|
|disabled|disable pane|Boolean|`false`|-|
|
|
|
|
#### Tabs Methods
|
|
|
|
##### reflowTabBar()
|
|
relayout tabbar
|
|
|
|
#### Tabs Events
|
|
|
|
##### @change(tab)
|
|
when user select tab
|
|
|
|
|Props | Description | Type|
|
|
|----|-----|------|
|
|
| tab | object of selected tab | Object:{name: String, label: String, disabled: Boolean}|
|