@beisen-phoenix/mobile-tabs

移动端tabs组件,包括普通tab和button-tab

Usage no npm install needed!

<script type="module">
  import beisenPhoenixMobileTabs from 'https://cdn.skypack.dev/@beisen-phoenix/mobile-tabs';
</script>

README

描述

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