@beisen-platform/tab-component
用于页面切换,提供平级的区域将大块内容进行收纳和展现,和保持界面整洁。
Last updated a year ago by beisencorp .
ISC · Repository · Original npm · Tarball · package.json
$ cnpm install @beisen-platform/tab-component 
SYNC missed versions from official npm registry.

Tab组件说明文档

参数说明

const props = {

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

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

  /**
   * string,当前高亮标签对应的eventKey的值
   */
  activeKey: '0',

  /**
   * 传入的标签数据
   */
  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} /> //将数据传入组件


Current Tags

  • 0.2.4-rc.1                                ...           latest (a year ago)

4 Versions

  • 0.2.4-rc.1                                ...           a year ago
  • 0.2.4                                ...           a year ago
  • 0.2.3                                ...           a year ago
  • 0.2.2                                ...           2 years ago

Copyright 2014 - 2016 © taobao.org |