cloud-ui.vusion
Version:
Vusion Cloud UI
68 lines (52 loc) • 2.46 kB
Markdown
### 基本用法
``` 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>
```