描述

移动端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'
        },
    ]