@beisen/tab-component

TabComponent

Stats

StarsIssuesVersionUpdatedCreatedSize
@beisen/tab-component
0.1.942 years ago5 years agoMinified + gzip package size for @beisen/tab-component in KB

Readme

Tab组件说明文档

参数说明

const props = {

  /**
   * 是否渲染
   */
  hidden: false,

  /**
   * tab组件的样式
   * 可选:block(默认),tabs
   */
  bsStyle: 'block',

  /**
   * 传入的标签数据
   */
  tabItems:[
    {
      /**
       * 标签的唯一标识名称
       */
      idx: 'tab0',

      /**
       * 标签的id 
       */
      eventKey: 0,

      /**
       * 标签内容
       */
      title: '全部档案',

      /**
       * 该标签初始时是否为高亮状态,
       * true   高亮
       * false  不高亮
       * tabItems内高亮标签个数有且只有一个
       */
      active: true,
    }
  ],

  /**
   * 内容自适应
   * 如果为true,则当浏览器宽度变化的时候会自适应内容,超出的内容会在下拉菜单中出现
   */
  autoAdaptive:false,

  /**
   * 手动自适应
   * 如果autoAdaptive=true,则该字段无效,显示的最大数目,超出的将会在下拉菜单中显示,当小于零时会显示全部
   */
  maxTabLength:3,

  /**
   * 默认不隐藏
   */
  hiddenTip:false,

  /**
   * 默认水平,可垂直
   */
  sideTip:false,

  /**
   * 点击回调函数
   * 返回eventKey为当前索引,event为事件对象
   */
  callBack: (eventKey,event) => console.log(eventKey, event)
}

组件使用方法

1.安装npm组件包

npm install @beisen/tab-component --save-dev

2.引用组件

import Tab from "@beisen/tab-component"
  1. 传入参数

该参数为上述参数,传入方式使用: data={参数}

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,
  hiddenTip:false,
  sideTip: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.