# TabBar 标签栏

## 基础用法

::: snippet 设置`items`配置标签项

```html
<template>
  <div class="tab-bar-demo">
    <zui-tab-bar :items="items"></zui-tab-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [{ name: 1, label: '标签1' }, { name: 2, label: '标签2' }]
    }
  } 
}
</script>

<style>
.tab-bar-demo {
  background: #eee;
  padding: 20px;
}
</style>
```

:::

## API

## Attribute 属性

参数|说明|类型|可选值|默认值
-|-|-|-|-
value | 值 | String, Number | - | -
items | 标签项 | Array | - | []

## Events 事件

事件名称|说明|回调参数
-|-|-
change | 切换标签项 | 名称, 数据, 下标