# Tabs 选项卡

[toc]

选项卡组件，需要tabs和tab两个组件一起关联使用，tabs应包裹在tab外部，tabs用于设置滚动/滑动等全局属性，tab用于设置每个标签的内容和属性,tab相关说明见[(tab文档)](/mp/packages/tab)

详细示例请参考/demo/pages/tab提供的demo。

## 组件引入

在`app.json`或在`index.json`中引入：

```json

{
  "usingComponents": {
    "tea-tabs": "../dist/tabs/index",
    "tea-tab": "../dist/tab/index"
  }
}

```

## 用法

### 基础用法

```html
<tea-tabs>
  <tea-tab
    wx:for="{{ tabs }}"
    wx:key="key"
    title="{{ item.title }}"
    name="{{ item.key }}"
    slot="{{ item.key }}"
  >
    <view class="content">
      {{ item.title }}
    </view>
  </tea-tab>
</tea-tabs>
```

### 自定义active态的line和tab的颜色

-   通过lineColor配置tab激活时的底线，通过activeColor配置tab激活时的文本颜色

```html
<tea-tabs lineColor="#f00" activeColor="#f00">
  <tea-tab
    wx:for="{{ tabs }}"
    wx:key="key"
    title="{{ item.title }}"
    name="{{ item.key }}"
    slot="{{ item.key }}"
  >
    <view class="content">
      {{ item.title }}
    </view>
  </tea-tab>
</tea-tabs>
```

### 自定义激活位置

-   active由业务在数据中自定义，此例中配置为nanshan，激活item中name值为nanshan的选项(请保持active的唯一性)

```html
<tea-tabs active="nanshan">
  <tea-tab
    wx:for="{{ tabs }}"
    wx:key="key"
    title="{{ item.title }}"
    name="{{ item.key }}"
    slot="{{ item.key }}"
  >
    <view class="content">
      {{ item.title }}
    </view>
  </tea-tab>
</tea-tabs>
```

### 选项卡在底部

```html
<tea-tabs placement="bottom">
  <tea-tab
    wx:for="{{ tabs }}"
    wx:key="key"
    title="{{ item.title }}"
    name="{{ item.key }}"
    slot="{{ item.key }}"
  >
    <view class="content">
      {{ item.title }}
    </view>
  </tea-tab>
</tea-tabs>
```

### 标签滚动

```html
<tea-tabs scrollable>
  <tea-tab
    wx:for="{{ tabs }}"
    wx:key="key"
    title="{{ item.title }}"
    name="{{ item.key }}"
    slot="{{ item.key }}"
  >
    <view class="content">
      {{ item.title }}
    </view>
  </tea-tab>
</tea-tabs>
```

### 图标标签

```html
<tea-tabs scrollable>
  <tea-tab
    wx:for="{{ tabs }}"
    wx:key="key"
    title="{{ item.title }}"
    name="{{ item.key }}"
    slot="{{ item.key }}"
    icon="{{ item.icon }}"
    placement="{{ item.placement }}"
  >
    <view class="content">
      {{ item.title }}
    </view>
  </tea-tab>
</tea-tabs>
```

### 徽章标签

```html
<tea-tabs scrollable>
  <tea-tab
    wx:for="{{ tabs }}"
    wx:key="key"
    title="{{ item.title }}"
    name="{{ item.key }}"
    slot="{{ item.key }}"
    info="{{ item.info }}"
    dot="{{ item.dot }}"
  >
    <view class="content">
      {{ item.title }}
    </view>
  </tea-tab>
</tea-tabs>
```

### 图片标签

```html
<tea-tabs scrollable>
  <tea-tab
    wx:for="{{ tabs }}"
    wx:key="key"
    title="{{ item.title }}"
    name="{{ item.key }}"
    slot="{{ item.key }}"
    inactiveImage="{{ item.inactiveImage }}"
    activeImage="{{ item.activeImage }}"
    placement="{{ placement }}"
  >
    <view class="content">
      {{ item.title }}
    </view>
  </tea-tab>
</tea-tabs>
```

### 自定义panel区域高度

```html
<tea-tabs scrollable contentHeight="300">
  <tea-tab
    wx:for="{{ tabs }}"
    wx:key="key"
    title="{{ item.title }}"
    name="{{ item.key }}"
    slot="{{ item.key }}"
    inactiveImage="{{ item.inactiveImage }}"
    activeImage="{{ item.activeImage }}"
    placement="{{ placement }}"
  >
    <view class="content">
      {{ item.title }}
    </view>
  </tea-tab>
</tea-tabs>
```

更多示例 请clone代码或访问npm包查阅/demo/pages/tab提供的demo。

## Props

| 参数            | 描述                                                                     | 类型        | 默认值       | 可选值                                  |
| ------------- | ---------------------------------------------------------------------- | --------- | --------- | ------------------------------------ |
| active        | 当前激活的tab,如果没有指定则默认第一个                                                  | `String`  | -         | -                                    |
| lineColor     | line激活状态的颜色，也可通过外部类ext-class-line与is-active/is-inactive一起使用来控制更多状态     | `String`  | `#006EFF` | -                                    |
| activeColor   | 激活状态的tab文本颜色，也可通过外部类ext-class-tab与is-active/is-inactive一起使用来控制更多状态     | `String`  | `#006EFF` | -                                    |
| inactiveColor | 未激活状态的tab文本颜色，也可通过外部类ext-class-tab与is-active/is-inactive一起使用来控制更多状态    | `String`  | `#444`    | -                                    |
| placement     | 1).当设置在tabs组件时，表示选项卡出现的位置，默认为top。2).当设置在tab组件时，表示当前tab内元素的排列方式，默认为left | `String`  | `top`     | `['top', 'right', 'bottom', 'left']` |
| scrollable    | 允许tab横向滚动，默认为false不允许滚动                                                | `Boolean` | `false`   | `[true, false]`                      |
| scrollLeft    | 横向滚动区域的位置，位置信息会在tab切换时自动更新，使用时无需关注                                     | `Number`  | `0`       | -                                    |
| scrollTop     | 纵向滚动条位置，位置信息会在tab切换时自动更新，使用时无需关注                                       | `Number`  | `0`       | -                                    |
| vertical      | 是否允许纵向滑动切换tab，默认为false不允许                                              | `Boolean` | `false`   | -                                    |
| swipeable     | 是否开启滑动切换，默认为false不开启                                                   | `Boolean` | `false`   | `[true, false]`                      |
| contentHeight | 设置panel区域高度(仅在使用了swipeable属性时有效)                                       | `Number`  | -         | -                                    |

## 事件

| 事件名    | 描述          | 回调参数 | 返回值                       |
| ------ | ----------- | ---- | ------------------------- |
| change | tab切换时的回调事件 | -    | 返回值detail包含当前激活项的name和索引值 |

## Slots

| 名称  | 描述                                                   |
| --- | ---------------------------------------------------- |
| -   | slot的name与tab的name参数一致，用于tab的panel数据渲染，tab的参数详见tab文档 |

## 外部样式类

| 类名               | 描述                                                                        |
| ---------------- | ------------------------------------------------------------------------- |
| `ext-class`      | 组件根节点样式类                                                                  |
| `ext-class-tab`  | 选项卡(tea-tabs\_\_item)的样式类，可配合is-active(激活)/is-inactive(未激活)两个状态类设置更复杂的样式  |
| `ext-class-line` | line(tea-tabs\_\_line)的样式类，可配合is-active(激活)/is-inactive(未激活)两个状态类设置更复杂的样式 |

## CSS变量属性表

| 变量名                          | 默认值                       | 描述  |
| ---------------------------- | ------------------------- | --- |
| tabs-bar-width               | 80px                      | -   |
| tabs-list-height             | 200px                     | -   |
| tabs-panel-height            | 200px                     | -   |
| tabs-background-color        | @background-base-color    | -   |
| tabs-bar-border-color        | @border-color             | -   |
| tabs-bar-top-border-width    | 1px 0 0 0                 | -   |
| tabs-bar-right-border-width  | 0 1px 0 0                 | -   |
| tabs-bar-bottom-border-width | 0 0 1px 0                 | -   |
| tabs-bar-left-border-width   | 0 0 0 1px                 | -   |
| tabs-tab-inactive-text-color | @text-color               | -   |
| tabs-tab-active-text-color   | @text-primary-color       | -   |
| tabs-tab-height              | 44px                      | -   |
| tabs-tab-line-height         | 44px                      | -   |
| tabs-tab-text-size           | @font-size-h4             | -   |
| tabs-tab-padding             | @padding-none @padding-sm | -   |
| tabs-badge-text-padding      | 2px 3px 1px               | -   |
| tabs-badge-text-line-height  | 12px                      | -   |
| tabs-badge-text-margin       | @margin-none @margin-base | -   |
| tabs-badge-text-min-width    | auto                      | -   |
| tabs-badge-text-width        | auto                      | -   |
| tabs-badge-text-height       | auto                      | -   |
| tabs-badge-dot-width         | 8px                       | -   |
| tabs-badge-dot-height        | 8px                       | -   |
| tabs-badge-dot-margin        | @margin-none @margin-base | -   |
| tabs-panel-padding           | @padding-sm               | -   |
| tabs-line-color              | @border-primary-color     | -   |
| tabs-line-height-vertical    | 2px                       | -   |
| tabs-line-height-horizontal  | 100%                      | -   |
| tabs-line-width-vertical     | 100%                      | -   |
| tabs-line-width-horizontal   | 2px                       | -   |
| tabs-image-width             | 24px                      | -   |
| tabs-image-height            | 24px                      | -   |
| tabs-image-margin            | @margin-none @margin-base | -   |