- 开始使用
- 功能组件
- 附加组件
- 教程
- 如何定制
- 布局示例
- 项目结构
- 使用 Less & Sass
- 创建主题
- 创建样式
- Customizer.json 变量
- JavaScript 示例
- 自定义前缀
- 基础
- 打印组件
- 网格组件
- 面板
- 块
- 文章
- 评论
- 效果
- Flex 布局
- 覆盖
- 导航菜单
- 导航栏
- 二级导航
- 面包屑
- 分页
- 选项卡
- 缩略图导航
- 列表
- 描述列表
- 表格组件
- 表单
- 按钮组件
- 图标
- 关闭
- 徽章
- 提示框组件
- 缩略图
- 遮罩
- 文本
- 列
- 动画组件
- 对比度
- 下拉菜单
- 模态对话框
- 抽屉
- 切换器
- 拨动组件
- 滚动监听
- 平滑滚动
- 动态网格
- 视差网格
- 圆点导航
- 滑动导航
- 动态分页
- 高级表单
- 文件表单
- 密码表单
- 选择表单
- 占位符
- 进度条
- 灯箱
- 自动完成
- 日期选择器
- HTML 编辑器
- 滚动条
- 滑块集
- 幻灯片
- 视差
- 手风琴
- 通知
- 搜索
- 可嵌套
- 可排序
- 附着
- 时间选择器
- 工具提示
- 上传
切换器
通过不同的内容窗格进行动态变换。
用法
切换器组件由若干拨动器和与它们相关联的内容项目组成。添加 data-uk-switcher="{connect:'#ID'}"
到包含拨动器的元素,将此属性内的ID指向具有相同ID的包含内容项目的元素。添加 .uk-switcher
类到同一个元素中。通常,切换器和其他组件搭配使用,这里将展示其中一部分。
<!-- 这是包含拨动元素的容器 -->
<ul data-uk-switcher="{connect:'#my-id'}">
<li><a href="">...</a></li>
</ul>
<!-- 这是内容项目的容器 -->
<ul class="uk-switcher">
<li>...</li>
</ul>
在内容中切换条目/Switch items from within content
在某些情况下,你想要从显示的内容中操作切换到另一个内容节点。添加 data-uk-switcher-item
属性使之成为可能。为了指向目标条目,你必须将 data 属性设置为相应的标号。
<!-- 这是包含拨动元素的导航 -->
<ul data-uk-switcher="{connect:'#my-id'}">
<li><a href="">...</a></li>
</ul>
<!-- 这是内容条目的容器 -->
<ul class="uk-switcher">
<li> ... <a href="" data-uk-switcher-item="0">...</a></li>
<li> ... <a href="" data-uk-switcher-item="1">...</a></li>
</ul>
将 data 属性设置为 next
和 previous
将会切换到相邻的条目
<li> ... <a href="" data-uk-switcher-item="next">...</a></li>
<li> ... <a href="" data-uk-switcher-item="previous">...</a></li>
关联多个项目
切换器也可以管理多个内容容器。只需要在 connect
参数中填入需要关联的容器的ID,用逗号隔开。
<!-- 这是包含拨动元素的导航菜单 -->
<ul data-uk-switcher="{connect:'#my-id-one, #my-id-two'}">
<li><a href="">...</a></li>
</ul>
<!-- 这些是包含着内容项目的容器们 -->
<ul class="uk-switcher">
<li>...</li>
</ul>
<ul class="uk-switcher">
<li>...</li>
</ul>
动画
切换器组件允许你为它添加各式的切换动画。你所需要做的就是添加 animation
参数到data属性中,然后设置你希望使用的动画。查阅下面的列表,了解我们提供的动画吧。
Class | 描述 |
---|---|
fade |
元素淡入 |
scale |
元素由小变大 |
slide-top |
元素从顶部滑入 |
slide-bottom |
元素从底部滑入 |
slide-left |
元素从左边滑入 |
slide-right |
元素从右边滑入 |
slide-horizontal |
内容项目水平方向滑动,方向基于元素相邻关系。 |
slide-vertical |
内容项目垂直方向滑动,方向基于元素相邻关系。 |
<!-- 包含拨动元素的容器 -->
<ul data-uk-switcher="{connect:'#my-id', animation: 'fade'}">
<li><a href="">...</a></li>
</ul>
<!-- 包含内容项目的容器 -->
<ul class="uk-switcher">
<li>...</li>
</ul>
自定义动画
你同样可以使用 动画组件 中的 uk-animation-*
类来应用多个动画。通过这种方式你甚至可以创建你的自定义类来为切换器应用不同的动画效果。
<!-- 包含拨动元素的容器 -->
<ul data-uk-switcher="{connect:'#my-id', animation: 'uk-animation-fade, uk-animation-slide-left'}">
<li><a href="">...</a></li>
</ul>
<!-- 包含内容项目的容器 -->
<ul class="uk-switcher">
<li>...</li>
</ul>
切换器与二级导航
轻松地将切换器应用于 二级导航组件 中.
<!-- 这是包含拨动元素的二级导航 -->
<ul class="uk-subnav uk-subnav-pill" data-uk-switcher="{connect:'#my-id'}">
<li><a href="">...</a></li>
</ul>
<!-- 包含内容项目的容器 -->
<ul class="uk-switcher">
<li>...</li>
</ul>
切换器与选项卡
作为一个特例,添加 data-uk-tab="{connect:'#ID'}"
属性,使用“tab”参数替代“switcher”,使得切换器和 选项卡组件 相互结合。
<!-- 这是包含拨动元素的选项卡式导航 -->
<ul class="uk-tab" data-uk-tab="{connect:'#my-id'}">
<li><a href="">...</a></li>
</ul>
<!-- 包含内容项目的容器 -->
<ul class="uk-switcher uk-margin">
<li>...</li>
</ul>
注意 当使用选项卡组件的 .uk-tab-bottom
类的时候,导航和内容需要按相反的顺序放置,这样内容才会显示在选项卡的上方。
垂直选项卡
使用 网格组件正确地显示带有垂直排列的选项卡导航的内容。
<!-- 位于左边的选项卡式导航 -->
<div class="uk-grid">
<div class="uk-width-medium-1-2">
<!-- 包含拨动元素的垂直选项卡式导航 -->
<ul class="uk-tab uk-tab-left" data-uk-tab="{connect:'#my-id'}">...</ul>
</div>
<div class="uk-width-medium-1-2">
<!-- 包含内容项目的容器 -->
<ul class="uk-switcher">...</ul>
</div>
</div>
<!-- 位于右边的选项卡式导航 -->
<div class="uk-grid">
<div class="uk-width-medium-1-2 uk-push-1-2">
<!-- 包含拨动元素的垂直选项卡式导航 -->
<ul class="uk-tab uk-tab-right" data-uk-tab="{connect:'#my-id'}">...</ul>
</div>
<div class="uk-width-medium-1-2 uk-pull-1-2">
<!-- 包含内容项目的容器 -->
<ul class="uk-switcher">...</ul>
</div>
</div>
切换器与按钮
切换器同样可以应用于 按钮或按钮组 中。只需要添加切换器data属性到包含了一组按钮的 <div>
元素中或者添加到带有 .button-group
类的元素。
<!-- 包含拨动按钮的容器 -->
<div data-uk-switcher="{connect:'#my-id'}">
<button class="uk-button" type="button">...</button>
</div>
<!-- 包含内容项目的容器 -->
<ul class="uk-switcher uk-margin">...</ul>
<!-- 包含拨动按钮的按钮租 -->
<div class="uk-button-group" data-uk-switcher="{connect:'#my-id'}">
<button class="uk-button" type="button">...</button>
</div>
<!-- 包含内容项目的容器 -->
<ul class="uk-switcher uk-margin">...</ul>
切换器与导航菜单
若需将切换器应用于 导航菜单组件,添加data属性到导航菜单的 <ul>
元素中。使用 网格组件 将导航菜单和内容项放置在同一个网格布局中。
<div class="uk-grid">
<div class="uk-width-medium-1-4">
<!-- 包含拨动元素的导航菜单 -->
<ul class="uk-nav uk-nav-side" data-uk-switcher="{connect:'#my-id'}">
<li><a href="">...</a></li>
</ul>
</div>
<div class="uk-width-medium-3-4">
<!-- 包含内容项目的容器 -->
<ul class="uk-switcher">
<li>...</li>
</ul>
</div>
</div>
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 | 切换器条目显示或改变时触发 |
$('[data-uk-switcher]').on('show.uk.switcher', function(event, area){
console.log("Switcher switched to ", area);
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论