# Tab 选项卡

[toc]

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

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

## 组件引入

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

```json

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

```

## 用法

```html
<tea-tab></tea-tab>
```

## Props

| 参数            | 描述                                 | 类型              | 默认值     | 可选值                                  |
| ------------- | ---------------------------------- | --------------- | ------- | ------------------------------------ |
| title         | 选项卡的文本信息                           | `String`        | -       | -                                    |
| name          | 用于设置wx:key，自定义data等相关信息            | `String`        | -       | -                                    |
| icon          | 设置icon的类型，可从icon组件的文档中查阅预设的类型值     | `String`        | -       | -                                    |
| iconSize      | 设置icon的大小                          | `String`        | -       | -                                    |
| inactiveImage | 选项卡自定义图片未激活的状态                     | `String`        | -       | -                                    |
| activeImage   | 选项卡自定义图片已激活的状态                     | `String`        | -       | -                                    |
| placement     | 可配置image出现的位置，默认为left              | `String`        | `left`  | `["top", "right", "bottom", "left"]` |
| dot           | 是否显示小红点，用于需要显示新消息提醒的场景，默认为false不显示 | `Boolean`       | `false` | `[true, false]`                      |
| info          | 徽章显示的文案内容, 用于需要显示新消息数目的场景。         | `String,Number` | -       | -                                    |

## Slots

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

## 外部样式类

| 类名          | 描述       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |