## Tab组件

### 组件内容
<p>通用Tab组件目前包含以下内容</p>
<p>配置数据：线条宽度、当前活动tab项、是否开启左右滑动、是否开启滑动动效、滑动动效间隔时间</p>
<p>支持行为：左右滑动切换tab、点击tab切换</p>
<p>支持事件：切换tab回调事件、点击tab回调事件</p>

### 如何使用
npm
```shell
## 未安装package
npm install hello-ui --save-dev
## 已安装package
npm update hello-ui --save-dev
```
html
```html
<div class="bx-tab-container">
  <div class="bx-tab">
    <div class="bx-tab-wrap">
      <div class="bx-tab-item">
        <div class="bx-tab-text">分类一</div>
      </div>
      <div class="bx-tab-item">
        <div class="bx-tab-text">分类二</div>
      </div>
    </div>
    <div class="bx-tab-line"></div>
  </div>
  <div class="bx-tab-contents">
    <div class="bx-tab-scroller">
      <div class="bx-tab-content">
        <p>分类一内容</p>
        <p>分类一内容</p>
        <p>分类一内容</p>
      </div>
      <div class="bx-tab-content">
        <p>分类二内容</p>
        <p>分类二内容</p>
        <p>分类二内容</p>
      </div>
    </div>
  </div>
</div>
```
import as module
```js
// 使用全部组件情况
import 'node_modules/hello-ui/dist/hello.css';
import hello from 'hello-ui';
var tab = new hello.Tab('.bx-tab-container');
// 只使用Swiper组件情况
import 'node_modules/hello-ui/dist/components/Tab/Tab.css';
import {Tab} from 'hello-ui';
var tab = new Tab('.bx-tab-container');
```

### API
| 参数| 说明 | 类型 | 默认值 |
| --- | --- | --- |  --- |
| width | 可选,tab宽度, 320或80% | Number/String | 100% |
| lineWidth | 可选,线条宽度 | Number | 22 |
| activeIndex | 可选,初始选中项 | Number | 0 |
| slide | 可选,是否开启左右滑动 | Boolean | true |
| transition | 可选,是否开启左右滑动动效 | Boolean | true |
| transitionSpeed | 可选,滑动动效速度 | Number | 300 |
| bounce | 可选,是否开启回弹 | Boolean | true |
| onInit | 可选,tab初始化回调事件 | Function | noop |
| onSlidePrev | 可选,内容左滑回调事件 | Function | noop |
| onSlideNext | 可选,内容右滑回调事件 | Function | noop |
| onChange | 可选,tab切换回调事件 | Function | noop |
| onTabClick | 可选,tab点击回调事件 | Function | noop |

### Example
[功能预览](https://qiuguorong.github.io/hello-ui/dist/#/tab)
<p></p>
简单功能, 都使用默认值
```js
var tab = new Tab('.bx-tab-container');
```
定制功能, 可自选属性
```js
var tab = new Tab('.bx-tab-container', {
  width: '100%',
  lineWidth: '22',
  activeIndex: 0,
  slide: true,
  transition: true,
  transitionSpeed: 300,
  bounce: true,
  onInit: function () {},
  onSlidePrev: function () {},
  onSlideNext: function () {},
  onChange: function (index) {
    console.log('onChange', index);
  },
  onTabClick: function (index) {
    console.log('onTabClick', index);
  },
});
```

### 设备兼容

| 设备| 版本 | 滑动 | 动画 | 流畅 | 线条 |
| --- | --- | --- |  --- |  --- |  --- |
| iPhone5C | 8.1.2 |  |  |   |  |
| iPhone5C | 10.3.1 |  |  |  |  |
| iPhone5S | 8.3 |  |  |  |  |
| iPhoneSE | 11.1.2 | √ | √ | √ | √ |
| iPhone6 | 10.1.1 | √ | √ | √ |  |
| iPhone6S | 10.3.2 | √ | √ | √ | √ |
| iPhone7P | 11.1.1 | √ | √ | √ | √ |
| iPhoneX | 11 | √ | √ | √ | √ |
| iPad | 10.3.1 |  |  |  |  |
| 小米2S | 4.1.1 | √ | √ | √ | √ |
| 红米Note2 | 5.0.2 |  |  |  |  |
| 红米Note3 | 6.0.1 | √ | √ | √ | √ |
| 华为Mete8 | 7.0 | √ | √ | √ | √ |
| 华为TAG AL00 | 5.1 | √ | √ | √ | √ |
| Galaxy Note3 Lite 4G | 4.3 | √ | √ | √ | 快速滑动不连续 |
| Vivo X5SL | 4.4.4 |  |  |  |  |
| MEIZU MX5 | 5.0.1 | √ | √ | 没有很流畅 | 滑动有点顿 |
| MEIZU MX5 | 5.0.1 | √ | √ | √ | √ |
| OPPO R9TM | 5.1 | √ | √ | 略微不流畅 | √ |
| OPPO R7S | 4.4.4 | √ | √ | √ | √ |
| Nexus 6 | 7.0 |  |  |  |  |
| Hol-T00 | 4.2.2 | √ | √ | √ | √ |