# @beisen-platform/tab-component

> 用于页面切换，提供平级的区域将大块内容进行收纳和展现，和保持界面整洁。

Latest version **0.2.4-rc.1** (published 2019-04-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install @beisen-platform/tab-component
pnpm add @beisen-platform/tab-component
yarn add @beisen-platform/tab-component
bun add @beisen-platform/tab-component
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.4-rc.1 |
| Published | 2019-04-29 |
| First published | 2018-11-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 60.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | beisen |
| Maintainers | beisencorp |
| Keywords | beisen, react-component, es6 |

## Links

- npm: https://www.npmjs.com/package/@beisen-platform/tab-component
- Repository: http://gitlab.beisencorp.com/ux-cnpm/ux-tab-component
- npm.io page: https://npm.io/package/@beisen-platform/tab-component

## Dependencies (4)

- [@beisen-platform/tool-tip](https://npm.io/package/@beisen-platform/tool-tip.md)
- [@beisen-platform/common-func](https://npm.io/package/@beisen-platform/common-func.md)
- [@beisen/es6-promise-debounce](https://npm.io/package/@beisen/es6-promise-debounce.md)
- [@beisen-platform/common-mount](https://npm.io/package/@beisen-platform/common-mount.md)

## Recent versions

- 0.2.4-rc.1 (latest) — 2019-04-29
- 0.2.4 — 2019-04-16
- 0.2.3 — 2019-03-15
- 0.2.2 — 2018-11-29

## README

## Tab组件说明文档

### 参数说明

```javascript
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.引用组件

  ```javascript
import Tab from "@beisen/tab-component"
  ```
3. 传入参数

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

```javascript
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)
}
//定义传入组件的数据

```
使用组件

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


```

---
_Source: https://npm.io/package/@beisen-platform/tab-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._