切换器/Switcher
最后更新于:2022-04-01 22:22:37
# 切换器/Switcher
通过不同的内容窗格进行动态变换。
## 用法
切换器组件由若干拨动器和与它们相关联的内容项目组成。添加 `data-uk-switcher="{connect:'#ID'}"` 到包含拨动器的元素,将此属性内的ID指向具有相同ID的包含内容项目的元素。添加 `.uk-switcher` 类到同一个元素中。通常,切换器和其他组件搭配使用,这里将展示其中一部分。
### 示例
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f392fd72.jpg)
### Code
```
... ...
... ...
```
* * *
### 关联多个项目
切换器也可以管理多个内容容器。只需要在 `connect` 参数中填入需要关联的容器的ID,用逗号隔开。
#### 示例
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f3956be3.jpg)
#### Code
```
```
* * *
## 切换器与按钮
切换器同样可以应用于 [按钮或按钮组](button.html "Button component") 中。只需要添加切换器data属性到包含了一组按钮的 `<div>` 元素中或者添加到带有 `.button-group` 类的元素。
### 示例
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f39c091a.jpg)
### Code
```
```
* * *
## JavaScript 选项
这是一个关于如何通过属性设置选项的例子:
```
data-uk-switcher="{active:1}"
```
| 选项 | 可能的值 | 默认值 | 描述 |
| --- | --- | --- | --- |
| `connect` | CSS selector | false | 被关联的条目容器 |
| `toggle` | CSS selector | '> *' | 拨动CSS选择器,通过点击触发内容的切换行为。 |
| `active` | integer | 0 | 初始化时,呈激活状态的内容项目索引值 |
| `animation` | mixed | false | 预定义的动画名称或 uikit动画的类名。 |
| `swiping` | boolean | true | 启用或禁用通过滑动改变内容 |
### 事件
你可以为以下事件绑定回调函数,用于自定义功能:
| 事件名称 | 参数 | 描述 |
| --- | --- | --- |
| `show.uk.switcher` | event, active item | 切换器条目显示或改变时触发 |
### Example
```
$('[data-uk-switcher]').on('show.uk.switcher', function(event, area){
console.log("Switcher switched to ", area);
});
```
';
- ...
- ...
- ...
- ...
- ...
- ...
- ...
- ...
- ...
- ...
- ...
- ...
- ...
- ...