@beisen/TabComponent

TabComponent

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@beisen/TabComponent
Minified + gzip package size for @beisen/TabComponent in KB

Readme

Tab组件说明文档

参数说明

hidden: false, // bool 是否渲染 默认false
bsStyle: 'block', //string,可选择tab组件的样式 ,两个值可选:block,tabs,默认为block
activeKey: 0, //string,当前高亮标签对应的eventKey的值
tabItems:[  //传入的标签数据
  {
    idx: 'tab0', //string,标签的唯一标识名称
    eventKey: 0, //number, 标签的id 
    title: '全部档案', //string,标签内容
    active: true, //bool,该标签初始时是否为高亮状态,true为高亮,false为不高亮,tabItems内高亮标签个数有且只有一个
  }
],
maxTabLength:3, //手动自适应,如果autoAdaptive=true,则该字段无效,显示的最大数目,超出的将会在下拉菜单中显示 , 当小于零时会显示全部
autoAdaptive:false, //内容自适应,如果为true,则当浏览器宽度变化的时候会自适应内容,超出的内容会在下拉菜单中出现
callBack: (eventKey,event) => console.log(eventKey, event)  // 点击回调函数 返回eventKey为当前索引,event为事件对象

组件使用方法


import Tab from './src/index.js'; //引入tab组件

state = {
  bsStyle: 'block',
  activeKey: '0',
  tabItems:[
    {
      idx: 'tab0',
      eventKey: 0,
      title: '全部档案',
      active: true,
      children: '000'         
    },
    {
      idx: 'tab1',
      eventKey: 1,
      title: '招聘档案',
      active: false,
      children: '111'
    },
    {
      idx: 'tab2',
      eventKey: 2,
      title: '绩效',
      active: false,
      children: '222'
    }
  ],
  maxTabLength:3,
  autoAdaptive:false,
  callBack: (eventKey,event) => console.log(eventKey, event)
}
//定义传入组件的数据

使用组件

<Tab {...this.state} /> //将数据传入组件

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.