mand-mobile/components/tab-bar
MeloHG e2849108b5 test: 更新 Icon 相关快照 2023-02-01 22:02:10 +08:00
..
demo example(tab-bar): add gesture switching 2019-04-25 16:33:10 +08:00
test test: 更新 Icon 相关快照 2023-02-01 22:02:10 +08:00
README.en-US.md doc: update preview links 2019-01-29 16:31:24 +08:00
README.md doc: update preview links 2019-01-29 16:31:24 +08:00
component.js feat(code clean up): 2018-09-24 15:48:57 +08:00
index.vue feat: toast间距调整 && tabbar间距调整 && icon增加方形checked字体 && agree组件增加iconType属性 2022-07-21 17:47:45 +08:00

README.en-US.md

title preview
TabBar https://didi.github.io/mand-mobile/examples/#/tab-bar

To create a tab bar without a content area

Import

import { TabBar } from 'mand-mobile'

Vue.component(TabBar.name, TabBar)

Code Examples

API

TabBar Props

Props Description Type Default Note
v-model key of selected menu String - -
items menus data Array<{name: String, label: String, disabled: Boolean}> - -
has-ink display underline ink bar Boolean true -
ink-length the width of ink bar Number 80 the percentage width of ink bar, between 0-100
immediate trigger a change event immediately after initialization Boolean false -

TabBar Methods

reflow(index)

relayout tabbar

TabBar Events

@change(item, index, prevIndex)

selected menu index changes

Props Description Type
item object of previous selected menu Object
index index of current selected menu Number
index index of previous selected menu Number

TabBar Slot

<md-tab-bar>
  <template slot="item" slot-scope="{ item, currentName, index, items }">

  </template>
</md-tab-bar>