选项卡
最后更新于:2022-04-01 22:21:45
# 选项卡
创建拥有不同样式的选项卡导航。
## 用法
选项卡组件由一些并列的可点击选项卡标签组成。
| Class类 | 描述 |
| --- | --- |
| `.uk-tab` | 添加这个类到一个 `<ul>` 元素中定义一个选项卡组件。在列表中使用 `<a>` 元素作为选项卡标签。 |
| `.uk-active` | 添加这个类到选项卡标签,赋予选中状态。 |
| `.uk-disabled` | 添加这个类到选项卡标签,赋予禁用状态。 |
`data-uk-tab` 属性为两个目的提供支持。其一,它使得响应式行为成为可能。如果父容器太小而不能容纳所有的选项卡标签,它们将会合并到一个下拉菜单中,并由一个独立的默认选项卡作为拨动器。这里就需要用到 [下拉菜单组件](dropdown.html) 了。
第二,它的功能耦合了 [切换器组件](switcher.html),这是使用选项卡导航切换不同内容所必须的。
### 示例
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f2e9c0f1.jpg)
### Code
```
```
* * *
## 水平方向的修饰
添加下列类中的一个,用来改变选项卡的外观。这些修饰类可以组合使用。
### 选项卡的对齐
| Class类 | 描述 |
| --- | --- |
| `.uk-tab-flip` | 添加这个类,使选项卡右对齐,并翻转排列顺序。 |
| `.uk-tab-bottom` | 添加这个内到 `<ul>` ,将选项卡标签放在底部。这个类也能和其他类组合使用。 |
### 示例
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f2eaaba4.jpg)
### Code
```
```
* * *
## 垂直方向的修饰
添加 `.uk-tab-left` 或 `.uk-tab-right` 类,将选项卡放置在左边或者右边。
### 示例
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f2edecb7.jpg)
### Code
```
';
- ...
- ...
- ...
- ...
- ...