dwb-vue-tab
Install
npm i dwb-vue-tab --save
Mount
mount with global
import Vue from 'vue'
import TabBar from 'dwb-vue-tab'
Vue.use(TabBar)
mount with component
import { DwbVueTab } from 'dwb-vue-tab'
export default {
components: {
DwbVueTab
}
}
Props
Attribute |
Type |
Default |
Description |
data |
array |
[] |
for data rendered with tab-bar |
active |
[number,string] |
0 |
the element selected by default, supports the .sync modifier |
tabWidth |
string |
'110px' |
tab-bar width |
tabHeight |
string |
'40px' |
tab-bar height |
tabColor |
string |
'#999' |
tab-bar color |
tabStyle |
object |
{} |
custom style of tab-bar |
fontSize |
string |
'14px' |
font size of tab-bar |
fontFamily |
string |
'PingFangSC-Regular' |
font family of tab-bar |
name |
[string, obejct] |
null |
if the data-element is an object, render data with name |
background |
string |
'#FFF' |
tab-bar background |
highlight |
string |
'#A5884D' |
activated the colors shown |
activeStyle |
object |
{} |
activated the style shown |
lineUse |
boolean |
true |
use underlining or not |
lineHeight |
string |
'2px' |
underline height |
lineWidth |
[string, object] |
null |
underline width |
lineColor |
string |
'#A5884D' |
underline color |
lineStyle |
object |
{} |
custom style of underline |
initCallback |
boolean |
false |
initialize execution callback |
Events
Attribute |
Value |
Description |
callback |
(activated element) |
execute when switching activation elements |
Demo
<template>
<DwbVueTab :data="tabs"
:active.sync="active"
:initCallback="initCallback"
@callback="getData"/>
</template>
<script>
export default {
data () {
return {
tabs: ['Tab', 'Bar'],
active: 0,
initCallback: true,
}
},
methods: {
getData (res) {
console.log(res)
}
}
}
</script>
Example
npm install
npm run dev
[Vue Tab Bar]
[More Example]
Author
[Dengwb]