### 基本用法

``` html
<u-tabs value="B">
    <u-tab value="A"><template #title><u-text text="选项卡A"></u-text></template>选项卡 A 的内容</u-tab>
    <u-tab value="B"><template #title><u-text text="选项卡B"></u-text></template>选项卡 B 的内容</u-tab>
    <u-tab value="C"><template #title><u-text text="选项卡C"></u-text></template>选项卡 C 的内容</u-tab>
</u-tabs>
```

### 动态数据源

``` html
<u-tabs router :data-source="[{}]"></u-tabs>
```

### 外观-方形卡片（默认）

``` html
<u-tabs appear="square">
    <u-tab><template #title><u-text text="选项卡A"></u-text></template>选项卡 A 的内容</u-tab>
    <u-tab><template #title><u-text text="选项卡B"></u-text></template>选项卡 B 的内容</u-tab>
    <u-tab><template #title><u-text text="选项卡C"></u-text></template>选项卡 C 的内容</u-tab>
</u-tabs>
```

### 外观-圆形卡片（默认）

``` html
<u-tabs appear="round" size="small">
    <u-tab><template #title><u-text text="选项卡A"></u-text></template>选项卡 A 的内容</u-tab>
    <u-tab><template #title><u-text text="选项卡B"></u-text></template>选项卡 B 的内容</u-tab>
    <u-tab><template #title><u-text text="选项卡C"></u-text></template>选项卡 C 的内容</u-tab>
</u-tabs>
```

### 外观-线条导航

``` html
<u-tabs appear="line">
    <u-tab><template #title><u-text text="选项卡A"></u-text></template>选项卡 A 的内容</u-tab>
    <u-tab><template #title><u-text text="选项卡B"></u-text></template>选项卡 B 的内容</u-tab>
    <u-tab><template #title><u-text text="选项卡C"></u-text></template>选项卡 C 的内容</u-tab>
</u-tabs>
```

### 外观-胶囊导航

``` html
<u-tabs appear="capsule">
    <u-tab><template #title><u-text text="选项卡A"></u-text></template>选项卡 A 的内容</u-tab>
    <u-tab><template #title><u-text text="选项卡B"></u-text></template>选项卡 B 的内容</u-tab>
    <u-tab><template #title><u-text text="选项卡C"></u-text></template>选项卡 C 的内容</u-tab>
</u-tabs>
```

### 外观-文本形态

``` html
<u-tabs appear="text" size="mini">
    <u-tab><template #title><u-text text="选项卡A"></u-text></template>选项卡 A 的内容</u-tab>
    <u-tab><template #title><u-text text="选项卡B"></u-text></template>选项卡 B 的内容</u-tab>
    <u-tab><template #title><u-text text="选项卡C"></u-text></template>选项卡 C 的内容</u-tab>
</u-tabs>
```