> For the complete documentation index, see [llms.txt](https://vuxjs.gitbook.io/vux/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vuxjs.gitbook.io/vux/bu-ju-zu-jian/tab-xuan-xiang-qia.md).

# Tab 选项卡

## Props

### tab

| 参数            | 说明              | 类型      | 默认值     |
| ------------- | --------------- | ------- | ------- |
| line-width    | 可选，边框大小         | Number  | 3       |
| active-color  | 可选，高亮文字的颜色和线条颜色 | String  | #04be02 |
| default-color | 可选，默认文字的颜色      | String  | #666    |
| animate       | 可选，是否使用动画       | Boolean | true    |

### tab-item

| 参数       | 说明   | 类型      | 默认值   |
| -------- | ---- | ------- | ----- |
| selected | 是否高亮 | Boolean | false |

### Demo

\`\`\` vux height=50 components=Tab,TabItem

已发货未发货全部订单

\
export default {\
  data () {\
    return {\
      demo1: '未发货'\
    }\
  }\
}\
&#x20;\`\`\` ### 更简洁的粟子 \`\`\` vux height=50 components=Tab,TabItem<>\
export default {\
&#x20; data () {\
&#x20;   return {\
&#x20;     demo2: '美食',\
&#x20;     list2: \['精选', '美食', '电影', '酒店', '外卖']\
&#x20;   }\
&#x20; }\
}<br>

````
### 禁用滑动动画

``` vux height=50 components=Tab,TabItem
<template>
<tab :line-width="1" :animate="false">
  <tab-item :selected="demo2 === item" v-for="item in list2" @click="demo2 = item"><<item>></tab-item>
</tab>
</template>

<script>
export default {
  data () {
    return {
      demo2: '美食',
      list2: ['精选', '美食', '电影', '酒店', '外卖']
    }
  }
}
</script>
````