1.0.16 • Published 4 years ago
@beisen-phoenix/mobile-tabs v1.0.16
描述
移动端tabs组件,包括普通tab和button-tab
Tabs
| name | description | type | default |
|---|---|---|---|
| type | tab类型 | string类型,可选值包括 primary、secondary | primary |
| showLine | 是否显示下划线 | boolean | true |
| initialIndex | 默认选中的索引 | number | 0 |
| activeIndex | 通过受控方式实现自定义当前激活的是哪个 | number | |
| datas | tabs数据 | array,{label: string,value:string} | [] |
| onClick | 回调函数 | function | (label: string, value: string) => void |
| extraCls | 自定义class,用来自定义样式 | string |
ButtonTabs
| name | description | type | default |
|---|---|---|---|
| initialIndex | 默认选中的索引 | number | 0 |
| datas | tabs数据 | array | [] |
| onClick | 回调函数 | function | (label: string, value: string) => void |
| extraCls | 自定义class,用来自定义样式 | string |
ButtonTabs 的相关说明
该类型的tab长相类似于tag,用户可以自己设置每个tab的默认背景颜色、自已颜色、选中时的背景颜色以及字体颜色,通过datas这个属性可以做到:
const datas = [
{
label:'First Tab',
value: '1',
color:'red',
bgColor:'yellow',
activeColor:'green',
activeBgColor:'black'
},
{
label:'Second Tab Hello',
value: '2',
color:'white',
bgColor:'green',
activeColor:'pink',
activeBgColor:'black'
},
{
label:'Third Tab Hello World',
value: '3',
color:'white',
bgColor:'yellow',
activeColor:'blue',
activeBgColor:'pink'
},
{
label:'Fourth Tab Hello World China',
value: '4'
},
{
label:'Fifth Tab Hello World China Beijing',
value: '5'
},
]