### 基本用法

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

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

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

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

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

### 外观-线条导航

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

### 外观-胶囊导航

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

### 外观-文本形态

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