# 上传 允许用户通过文件表单或占位符域来上传文件 ## 用法 这个Javascript组件运用了最新的 XMLHttpRequest Level 2 规范，提供了通过包含上传进度条的Ajax进行文件上传追踪的功能。本组件提供了两种上传文件的方式： `select` 和 `drop`。 `select` 请求只能被用在`<input type="file">` 元素中，而 `drop`基本可以用在任何元素，通过从桌面将文件拖拽到指定元素就能轻松实现上传。记住，本组件并不在服务器上处理文件上传。 注意 使用此组件需要额外添加 `upload.css` 文件，在`css/components`文件夹中。此组件需要额外添加 `upload.js` 文件，在`js/components`文件夹中。 上传组件需要根据你的要求单独进行实施。在我们的例子中，我们使用[占位符](placeholder.html)和[文件表单](form-file.html)，同时使用了`drop` 和 `select`请求。另外，还是用了[进度条](progress.html)来显示上传进度。 ### Example  ### Markup ``` ``` * * * ### JavaScript 为了创建 `select` 和 `drop` 上传监听器，你需要使用目标元素和选项来实例化每个上传class，以定义回调和其他有用的设置。 ``` ``` * * * ## JavaScript 选项 | 选项 | 可用值 | 默认值 | 描述 | | --- | --- | --- | --- | | `action` | string | '' | 上传的目标URL | | `single` | boolean | true | 逐一进行文件发送 | | `param` | string | files[] | 传递查询名称 | | `params` | JSON Object | {} | 额外的请求参数 | | `allow` | string | *.* | 文件过滤器 | | `filelimit` | integer | false | 文件上传数量限制 | | `type` | (text | json) | text | 来自服务器的响应类型 | ### 回调事件 | 名称 | 参数 | | --- | --- | | `before` | settings, files | | `beforeAll` | files | | `beforeSend` | xhr | | `progress` | percent | | `complete` | response, xhr | | `allcomplete` | response, xhr | | `notallowed` | file, settings | | `loadstart` | event | | `load` | event | | `loadend` | event | | `error` | event | | `abort` | event | | `readystatechange` | event |

# 工具提示/Tooltip 轻松创建一个漂亮的工具提示。 ## 用法 要应用这个组件，需要为某个元素添加 `data-uk-tooltip` 属性。你还需要添加一个 title 属性，它的值即是提示文本。 注意 使用此组件需要额外添加 `tooltip.css` 文件，在`css/components`文件夹中。此组件需要额外添加 `tooltip.js` 文件，在`js/components`文件夹中。 ### Example  ### Markup ``` ... ... ``` * * * ## 对齐 添加下列选项之一到 `data-uk-tooltip` 属性中来调整提示组件的文本对齐方式。 | 属性 | 描述 | 示例 | | --- | --- | --- | | `pos:'top'` | 将提示组件对齐到顶部。 |  | | `pos:'top-left'` | 将提示组件对齐到左上。 |  | | `pos:'top-right'` | 将提示组件对齐到右上。 |  | | `pos:'bottom'` | 将提示组件对齐到底部。 |  | | `pos:'bottom-left'` | 将提示组件对齐到左下。 |  | | `pos:'bottom-right'` | 将提示组件对齐到右下。 |  | | `pos:'left'` | 将提示组件对齐到左侧。 |  | | `pos:'right'` | 将提示组件对齐到右侧。 |  | ### Markup ``` ... ``` * * * ## JavaScript 选项 这是一个如何通过属性来设置选项的示例: ``` data-uk-tooltip="{pos:'bottom-left'}" ``` | 选项 | 可用的值 | 默认值 | 描述 | | --- | --- | --- | --- | | `offset` | integer | 5 | 与源元素之间的偏移量 | | `pos` | string | 'top' | 工具提示组件定位 | | `animation` | boolean | false | 工具提示的淡入动画 | | `delay` | integer | 0 | 提示组件延迟显示多少毫秒 | | `cls` | string | '' | 显示提示时，添加的自定义class | | `activeClass` | string | 'uk-active' | 被拨动的选中类名/Toggled active class |

# 时间选择器 轻松创建可以从预填充下拉菜单中选择时间的时间选择器。 ## 用法 将 `data-uk-timepicker` 属性添加到 `<input>` 元素中就能创建时间选择器。获得焦点后，时间选择器会自动显示预填充的下拉菜单，可以通过键盘上的上下按钮或滚动鼠标进行浏览。注意 使用此组件需要额外添加 `timepicker.js` 文件，在`js/components`文件夹中。 重要 时间选择器组件需要[自动完成组件](autocomplete.html)才能生效。请确保已经将两者引入页面。 ### Example  ### Markup ```

``` * * * ## 显示子午线时间 添加_format_选项并设置为`12h`即可显示子午线时间。 ### Example  ### Markup ```

``` * * * ## JavaScript 选项 这是如果通过属性设置选项的例子： ``` data-uk-timepicker="{format:'12h'}" ``` | 选项 | 可用值 | 默认值 | 描述 | | --- | --- | --- | --- | | `format` | '24h' or '12h' | '24h' | 定义时间表示法 | | `start` | Integer between 0 and 24 | 0 | 起始时间 | | `end` | Integer between 0 and 24 | 24 | 终止时间 | ### 手动初始化元素 ``` var timepicker = UIkit.timepicker(element, { /* options */ }); ```

# 附着/Sticky 让页面元素保持在视口顶部，比如跟随滚动的导航栏。 ## 用法 创建一个能在页面滚动时能保持在视口顶部的页面元素，添加 `data-uk-sticky` 属性到该元素即可。注意 使用此组件需要额外添加 `sticky.css` 文件，在`css/components`文件夹中。此组件需要额外添加 `sticky.js` 文件，在`js/components`文件夹中。 ### Example  ### Markup ``` ``` * * * ## 赋予偏移量 还可以定位元素处于视口边缘下的位置。比如，添加 `data-uk-sticky="{top:100}"` 属性创建100px的margin。 ### Example  ### Markup ``` ``` * * * ## 添加延迟 为元素添加延迟，这样使它能在页面滚动特定距离后才变成粘连状态，你需要添加一个负偏移值到data属性，比如 `data-uk-sticky="{top:-200}"`。还可以添加[动画](animation.html)让元素可以平滑地再次出现。 ### Example  ### Markup ``` ``` * * * ## 响应式行为 还可以通过在data属性中添加断点选项，来实现在不同设备上禁用粘连行为，比如 `data-uk-sticky="{media: 640}"` 。另外，还可以使用媒体查询来控制。 ### Markup ``` ``` * * * ## JavaScript 选项 | 选项 | 可用值 | 默认值 | 描述 | | --- | --- | --- | --- | | `top` | integer | 0 | 触发附着行为的顶部偏移量 | | `animation` | string | '' | UIkit 的动画 class | | `clsinit` | string | uk-sticky-init | 元素首次附着时进行初始化的class | | `clsactive` | string | uk-active | 元素附着时添加的 class | | `clsinactive` | string | '' | 元素未附着时添加的 class | | `getWidthFrom` | string | '' | 粘连模式下获取宽度的CSS选择器。默认情况下它从已创建的外层元素获取宽度值。 | | `media` | integer / string | false | 激活状态所需的整型宽度条件，或CSS媒体查询 | | `target` | boolean | false | 确保粘连元素不会在DOM就绪后通过位置散列（location hash）越过目标元素。 | | `showup` | boolean | false | 是否仅在滚动时显示附着的元素 | | `boundary` | mixed | false | 设置为 `true` 将粘连绑定到父元素或使用CSS选择器将粘连绑定到特定元素。 | ### 手动初始化元素 ``` var sticky = UIkit.sticky(element, { /* options */ }); ``` ### 事件 | 名称 | 参数 | 描述 | | --- | --- | --- | | `active.uk.sticky` | event | 获得附着效果 | | `inactive.uk.sticky` | event | 脱离附着状态 |

# 可排序/Sortable 创建可排序的网格和列表重新来排列元素的顺序。 拖拽元素到另一个可排序的网格中的某处，该网格中其它条目会自动适应排列顺序。这将会在诸如排列画廊条目或者菜单条目时显得尤为有用。 * * * ## 用法 要使用这个组件，需要在容器中添加 `.uk-sortable` 类，然后创建子元素来定义这个组件。为了使必要的JavaScript生效，还需要添加 `data-uk-sortable` 属性。注意 使用此组件需要额外添加 `sortable.css` 文件，在`css/components`文件夹中。此组件需要额外添加 `sortable.js` 文件，在`js/components`文件夹中。 ### Example 在这里的例子中，我们使用到了 [网格组件](grid.html)来放置可排序的条目。  ### Markup ```

• ...
• ...

``` * * * ### 任意元素的排序 可排序组件并不限制只能用于 `<ul>` 元素。你可以使用任意块元素作为容器。 #### Markup ``` ``` * * * ## 可排序手柄 默认地，整个可排序元素都可以拖拽进行排序。为了创建一个操作手柄，只需为希望作为手柄的元素添加 `{handleClass:'uk-sortable-handle'}` 选项到 data 属性，并添加手柄的class 类名。 ### Example  NOTE 在这个例子中，使用了 [图标组件](icon.html) 中的 `.uk-icon-bars` 类名来设定手柄的样式。 ### Markup ```

• ...

``` * * * ## 多个列表之间的排序 为了是跨列表的拖拽排序成为可能，你需要为每个列表添加 `data-uk-sortable="{group:'GROUP-NAME'}"` 属性，将它们归为一组。 ### Example  ### Markup ```

...

...

``` * * * ## JavaScript 选项 这是一个关于如何通过data属性设置选项的例子： ``` data-uk-sortable="{animation:0, dragCustomClass:'dragging'}" ``` | 选项 | 可用值 | 默认值 | 描述 | | --- | --- | --- | --- | | `group` | string | false | 列表的组 | | `animation` | integer | 150 | 毫秒计时的动画 | | `threshold` | integer | 10 | 触发元素拖拽的鼠标移动像素距离的阈值 | | `handleClass` | string | '' | 自定义类名，用于定义哪些元素可以触发排序 | | `dragCustomClass` | string | '' | 添加到被拖拽元素中的自定义类 | ### 手动地初始化元素 ``` var sortable = UIkit.sortable(element, { /* options */ }); ``` ### Events | Name | Parameter | Description | | --- | --- | --- | | `start.uk.sortable` | event, sortable object, dragged element | 可排序拖拽开始时触发 | | `move.uk.sortable` | event, sortable object | 移动可排序条目时触发 | | `stop.uk.sortable` | event, sortable object, dragged element | 拖拽终止时触发 | | `change.uk.sortable` | event, sortable object, dragged element, action | 改变可排序条目时触发 |

# 可嵌套/Nestable 创建可以通过拖拽排序的可嵌套式列表。 可嵌套组件允许你通过拖拽排序条目。这是非常有用的，比如在管理界面中希望组织不同的分类或者菜单条目时。 * * * ## 用法 可嵌套列表由列表本身、它的内容条目和可嵌套的面板组成。注意 使用此组件需要额外添加 `nestable.css` 文件，在`css/components`文件夹中。此组件需要额外添加 `nestable.js` 文件，在`js/components`文件夹中。 | class和data属性 | 描述 | | --- | --- | | `.uk-nestable` | 添加此类名到 `<ul>` 元素，定义可嵌套组件。 | | `.uk-nestable-item` | 添加此类名到列表的每一个 `<li>` 元素。 | | `.uk-nestable-panel` | 添加此类名到 `<li>` 元素内部的 `<div>` 元素，给条目设定样式。 | NOTE 为了使必要的JavaScript生效，需要添加 `data-uk-nestable` 属性。 ### Example  ### Markup ```

• ...

``` * * * ## 可嵌套组件的手柄/Nestable handle 默认地，整个可嵌套元素都可以用来拖拽排序。要创建一个替换默认效果的手柄，需要添加 `{handleClass:'uk-nestable-handle'}` 选项到data 属性中。并为你想要用作手柄的元素添加手柄的类名。 ### Example  NOTE 在这个例子中，我们使用了 [图标组件](icon.html) 中的 `.uk-icon-bars` 类名，来为手柄定义样式。 ### Markup ```

• ...

``` * * * ## 可嵌套拨动/Nestable toggle 默认地，整个可嵌套元素都能拖拽排序。要创建一个替换默认效果的手柄，需要添加 `.uk-nestable-toggle` 类名和 `data-nestable-action="toggle"` 属性到可嵌套面板内的 `<div>` 元素。 ### Example  ### Markup ```

• ...

``` * * * ## 多个列表的排序 要实现垮列表的排序，你可以为每个列表添加e `data-uk-nestable="{group:'GROUP-NAME'}"` 属性将他们归为一组。 ### Example  ### Markup ```

...

...

``` * * * ## 禁用嵌套 禁用列表条目的嵌套，你只需添加 `data-uk-nestable="{maxDepth:1}"` 属性。当然你还可以使用此属性来确定要嵌套的深度能有多大。  ### Markup ```

...

``` * * * ## JavaScript 选项 这是一个如何使用data属性来设置选项的例子: ``` data-uk-nestable="{maxDepth:0, group:'widgets'}" ``` | 选项 | 可用值 | 默认值 | 描述 | | --- | --- | --- | --- | | `group` | string | false | 列表组 | | `maxDepth` | integer | 10 | 最大嵌套层数 | | `threshold` | integer | 20 | 以px为单位，开始拖拽的阈值。 | | `listNodeName` | string | ul | 列表节点名称 | | `itemNodeName` | string | li | 条目节点名称 | | `listBaseClass` | string | uk-nestable | 列表的基本类名 | | `listClass` | string | uk-nestable-list | 列表的类名 | | `listitemClass` | string | uk-nestable-list-item | 列表条目的类名 | | `itemClass` | string | uk-nestable-item | 条目类名 | | `dragClass` | string | uk-nestable-list-dragged | 添加到被拖拽列表的类名 | | `movingClass` | string | uk-nestable-moving | 拖动时添加到 `<html>` 元素的类名 | | `handleClass` | string | uk-nestable-handle | 拖拽手柄的类名 | | `collapsedClass` | string | uk-nestable-collapsed | 被收缩的条目的类名 | | `placeClass` | string | uk-nestable-placeholder | 当前被拖拽元素的占位符类名 | | `noDragClass` | string | uk-nestable-nodrag | 带有此类名的元素不会触发拖拽。Elements with this class will not trigger dragging. Useful when having the complete item draggable and not just the handle. | | `noChildrenClass` | string | uk-nestable-nochildren | 带有此class的元素不再有子级元素。这对于最低层级的条目很有用。 | | `emptyClass` | string | uk-nestable-empty | 空列表的类名 | ### 手动初始化 ``` var nestable = UIkit.nestable(element, { /* options */ }); ``` ### Events | 名称 | 参数 | 描述 | | --- | --- | --- | | `start.uk.nestable` | event, nestable object | 拖拽开始时触发 | | `move.uk.nestable` | event, nestable object | 移动可嵌套条目时触发 | | `stop.uk.nestable` | event, nestable object | 拖拽终止时触发 | | `change.uk.nestable` | event, nestable item, action | 改变可嵌套条目时触发 |

# 搜索/Search 轻松创建一个好看的搜索框。 ## 用法 搜索组件由搜索表单和搜索文本域组成。注意 使用此组件需要额外添加 `search.css` 文件，在`css/components`文件夹中。此组件需要额外添加 `search.js` 文件，在`js/components`文件夹中。 | Class类 | 描述 | | --- | --- | | `.uk-search` | 添加这个类到 `<form>`元素中，定义搜索组件。 | | `.uk-search-field` | 添加这个类到 `<input>`元素中创建一个搜索文本域。 | 为了使搜索框所必须的JavaScript能够生效，需要添加 `data-uk-search`属性。 ### Example  ### Markup ```

``` * * * ## JSON 搜索结果 在需要用JSON格式化搜索结果的表单中添加 `{source:'PATH/TO/RESULTS'}` 到data属性中，并设置JSON文件的路径 ([示例](../tests/components/_searchautocomplete.json)).你可以用 [下拉菜单组件](dropdown.html) 中的下拉菜单来显示搜索结果。搜索的结果会注入并显示在下拉菜单中。你甚至可以用键盘上的上下键来操作这个下拉菜单。 重要 这样的搜索框需要用到 [自动完成组件](addons_autocomplete.html)。请确定你已经将他们引入了。 ### Example  ### Markup ```

...

``` * * * ## 导航条中的搜索 搜索框也可以用在[导航条](navbar.html)中. ### Example  ### Markup ``` ``` * * * ## 抽屉中的搜索 搜索框也可以放在抽屉中。 ### Example  ### Markup ``` ... ``` ## JavaScript 选项 | 选项 | 可用值 | 默认值 | 描述 | | --- | --- | --- | --- | | `source` | string | '' | 数据源的URL | | `minLength` | integer | 3 | 触发自动完成的最小输入长度 | | `param` | string | search | 发送Ajax请求的查询名称 | | `delay` | integer | 300 | 停止输入后的延时 | ### 手动初始化 ``` var search = UIkit.search(element, { /* options */ }); ``` ### 事件 跟[自动完成组件](autocomplete.html)的事件一样。

# 通知/Notify 创建可以被拨动显示的通知，并且能自动淡出。 当你将鼠标悬停在通知上面时，它不会自动消失，直到你移开鼠标。还可以通过点击关闭通知。 * * * ## 用法 通知组件提供了一个简单的API，你可以在应用程序代码中重用它。下面的JavaScript代码片段让你快速上手。注意 使用此组件需要额外添加 `notify.css` 文件，在`css/components`文件夹中。此组件需要额外添加 `notify.js` 文件，在`js/components`文件夹中。 ### JavaScript ``` UIkit.notify({ message : 'Bazinga!', status : 'info', timeout : 5000, pos : 'top-center' }); // Shortcuts UIkit.notify('My message'); UIkit.notify('My message', status); UIkit.notify('My message', { /* options */ }); ``` ### Example  ``` UIkit.notify("Message..."); ``` * * * ### HTML 信息 可以在通知信息内嵌HTML，比如 [图标](icon.html)。 ### Example  ``` UIkit.notify(" Message with an icon..."); ``` * * * ### 延迟和常驻/Delay and sticky 你可以通过 `timeout` 定义在多少毫秒内通知消息是可见的。还可以把延迟设为0，让通知消息常驻不消失。 ### Example  ``` UIkit.notify("Message...", {timeout: 0}); ``` * * * ### 定位 添加以下参数中的一个来调整通知出现的位置。 `top-center` ``` UIkit.notify("...", {pos:'top-center'}) ``` `top-left` ``` UIkit.notify("...", {pos:'top-left'}) ``` `top-right` ``` UIkit.notify("...", {pos:'top-right'}) ``` `bottom-center` ``` UIkit.notify("...", {pos:'bottom-center'}) ``` `bottom-left` ``` UIkit.notify("...", {pos:'bottom-left'}) ``` `bottom-right` ``` UIkit.notify("...", {pos:'bottom-right'}) ```  * * * ### 状态 通知可以通过添加一些状态效果来表达一般的消息，成功的消息，警告或者危险等等。 `info` ``` UIkit.notify("...", {status:'info'}) ``` `success` ``` UIkit.notify("...", {status:'success'}) ``` `warning` ``` UIkit.notify("...", {status:'warning'}) ``` `danger` ``` UIkit.notify("...", {status:'danger'}) ``` 

# 手风琴/Accordion 创建一个列表菜单，通过点击它们的标题来展开或收缩内容。 ## 用法 使用手风琴菜单，为容器元素添加 `uk-accordion` 类和 `data-uk-accordion` 属性就行。然后为容器内的每项内容添加 `uk-accordion-content`类。最后，为标题或者其他元素添加 `uk-accordion-title` 类来创建拨动器。注意 使用此组件需要额外添加 `accordion.css` 文件，在`css/components`文件夹中。此组件需要额外添加 `accordion.js` 文件，在`js/components`文件夹中。 ### Example  ### Markup ``` ``` * * * ## 多条同时展开 同时显示多条内容，而不在其他内容显示时被隐藏，添加 `{collapse: false}` 选项到data属性就行了。 ### Example  * * * ## JavaScript 选项 | 选项 | 可用值 | 默认值 | 描述 | | --- | --- | --- | --- | | `showfirst` | boolean | true | 初始化时首先显示 | | `collapse` | boolean | true | 允许同时展开多条 | | `animate` | boolean | true | 拨动动画 | | `easing` | string | swing | 动画功能 | | `duration` | integer | 300 | 动画持续时间 | | `toggle` | string | .uk-accordion-title | 拨动器的Css选择器 | | `containers` | string | .uk-accordion-content | 内容容器的Css选择器 | | `clsactive` | string | uk-active | 条目被激活时添加这个Class | ### 手动初始化 ``` var accordion = UIkit.accordion(element, { /* options */ }); ``` ### 事件 | 名称 | 参数 | 描述 | | --- | --- | --- | | `toggle.uk.accordion` | event, active, toggle, content | 拨动时触发 |

# 视差/Parallax 依赖于页面滚动条位置的动态 CSS 特性。 ## 用法 要使用这个组件，需要添加 `data-uk-parallax` 属性到容器元素。并为每个你想要使之动态变化的 CSS 属性添加对应的选项值。注意 此组件需要额外添加 `parallax.js` 文件，在`js/components`文件夹中。  ### Markup ``` ``` * * * ## 选项 UIkit 提供了一系列的选项，你可以把它们添加到 `data-uk-parallax` 属性中： | 选项 | 描述 | | --- | --- | | `x` | 以像素为单位的 X 轴方向位移。 | | `xp` | 以百分比为单位的 X 轴方向位移。 | | `y` | 以像素为单位的 Y 轴方向位移。 | | `yp` | 以百分比为单位的 Y 轴方向位移。 | | `bg` | 使背景图片动态变化。 | | `bgp` | 以百分比为单位的背景图片动态变化。 | | `rotate` | 以度为单位的顺时针动态变化。 | | `scale` | 缩放的动态变化 | | `color` | 色彩的动态变化（需要设置起始值和终止值） | | `background-color` | 背景色彩的变化（需要设置起始值和终止值） | | `border-color` | border 色彩的变化（需要设置起始值和终止值） | | `opacity` | 透明度的变化 | 注意 你可以基础性地使任意只有一值的 CSS 属性动态变化，比如宽度和高度，直接添加到属性中即可。 ### Markup ``` ``` * * * ### 起始值和终止值 属性通常由当前值变化到你设置的目标值。然而，你还可以自己定义一个起始值。这将通过传递字符串到包含由逗号隔开的两个值的选项中来实现。 注意 某些属性，比如颜色，必须要有起始值和终止值。 #### Markup ``` ``` * * * ## 嵌套的动画/Nested animation 为前提的元素使用不同的动画是很简单的事情。只需在视差容器中再创建一个容器，并在新的 `data-uk-parallax` 属性中添加你的选项即可。 ### Example  ### Markup ``` ``` * * * ## 目标选项/Target Option 通常，视差动画从元素进入视口开始，到离开视口结束。开始和终止动画基于另一个元素在视口中的可见性，使用 `target` 选项进行设置。在使用嵌套动画时会很有帮助。 ### Example  ### Markup ``` ``` * * * ## 速度/Velocity 添加 `velocity` 选项，调整动画的缓动效果。 ### Example  ### Markup ``` ``` * * * ## 视口/Viewport 使用 `viewport` 选项，动画持续时间将被调整。其值为 `1` 或 `false` 时，视差动画从元素进入视口开始，到离开视口结束。将其设置为 `0.5`，如下面的例子，动画只在元素出现的前半个视口中发生。 ### Example  ### Markup ``` ``` * * * ## JavaScript 选项 | 选项 | 可用值 | 默认值 | 描述 | | --- | --- | --- | --- | | `velocity` | float | 0.5 | 页面滚动时，动画的速度 | | `target` | mixed | false | 关于动画持续时间的元素尺寸参考/Element dimension reference for animation duration. | | `viewport` | float (0 to 1) | false | 依赖于视口的动画范围 | | `media` | integer / string | false | 启用视差效果的视口宽度条件（比如640px），或CSS媒体查询 | ### 手动初始化 ``` var parallax = UIkit.parallax(element, { /* options */ }); ```

# 幻灯片/Slideshow 创建可以全屏模式和遮罩效果的，具有炫酷过渡效果的响应式图片或视频幻灯片。 ## 用法 要创建幻灯片，只需要添加 `.uk-slideshow` 类到一个 `<ul>` 元素中，并将你的图片放入列表条目内。为了加载必要的JavaScript，还需要添加 `data-uk-slideshow` 属性。 注意 使用此组件需要额外添加 `slideshow.css` 文件，在`css/components`文件夹中。此组件需要额外添加 `slideshow.js` 文件，在`js/components`文件夹中。 ### Example  注意 如果需要自动播放，为data属性添加 `{autoplay:true}` 选项就行了。 ### Markup ```

``` * * * ## 导航/Navigations 在幻灯片中进行导航，使用 `data-uk-slideshow-item` 属性就行。为了能指向幻灯片，你必须为每个导航单元设置data属性指向每个幻灯片单元的序号。带有 `data-uk-slideshow-item` 属性的元素需要被放置在带有 `data-uk-slideshow` 的容器中。 ### Markup ``` ``` 将data属性设置为 `next` and `previous` 就能进行相邻幻灯片之间的切换。像这样： ### Markup ``` ``` * * * ### 滑动导航和圆点导航 幻灯片组件的灵活性使之可以用任何其他UIkit组件进行幻灯片的导航。比如[滑动导航](slidenav.html)和[圆点导航](dotnav.html)可以用来像下面这样作为幻灯片的导航。 #### Example  #### Markup ``` ``` * * * ## 过渡形式 幻灯片组件允许添加不同的幻灯片切换效果。你需要做的就是将 `animation` 参数添加到data属性中，并声明你希望使用的动画。查看下面的表格了解咱都提供了哪些动画效果。 | Class | 描述 | | --- | --- | | `fade` | 淡入 | | `scroll` | 滚动进入 | | `scale` | 放大 | | `swipe` | 滑动进入、滑动离开 | 要使用下面这些增强的过渡效果，必须在文档head中引入 `slideshow-fx.js` 。下面表格不翻译了，看后面的演示吧。 | Class | 描述 | | --- | --- | | `slice-down` | The items slide down in slices. | | `slice-up` | The items slide up in slices. | | `slice-up-down` | The sliced items slide in alterning directions. | | `fold` | The items are folded in. | | `puzzle` | The items are divided in squares that randomly fade in. | | `boxes` | The items are divided in squares that scale in diagonally from the top left corner. | | `boxes-reverse` | The items are divided in squares that scale in diagonally from the bottom right corner. | | `random-fx` | Different animations are applied randomly. | ### Markup ```

...

``` * * * ## Ken Burns 效果 炫酷的 Ken Burns 效果也能用在幻灯片里。只需要添加 `{kenburns:true}` 选项到data属性中就行。这个效果还能用在视频上。 ### Example  ### Markup ```

...

``` 自定义动画持续时间: ```

...

``` * * * ## 全屏幻灯片 创建填满整个视口的全屏幻灯片，只需要添加一个 `.uk-slideshow-fullscreen` 类。 #### Markup ```

...

``` * * * ## 遮罩 还可以用遮罩来提升幻灯片的效果，为幻灯片列表条目内的 `<div>` 元素添加 `.uk-uk-overlay-panel` 类就行。添加 `.uk-overlay-background` 和 `.uk-overlay-fade` 带来背景与过渡效果。要实现幻灯片显示时即触发遮罩，添加 `.uk-uk-overlay-active` 到列表容器即可。更多选项查看 [遮罩组件](overlay.html). ### Example  ### Markup ```

• ...

``` * * * ## 视频 UIkit 允许在幻灯片中放入视频和iframe。 ### Example ### Markup ```

``` * * * ## 内容 基本上可以在幻灯片内插入任何内容，比如文本甚至整个网格。 ### Example  * * * ## JavaScript 选项 | 选项 | 默认值 | 描述 | | --- | --- | --- | | `animation` | 'fade' | 定义幻灯片之间优先呈现的过渡效果 | | `duration` | 500 | 过渡效果持续时间 | | `height` | 'auto' | 幻灯片高度 | | `start` | 0 | 定义显示的第一张幻灯片 | | `autoplay` | false | 是否自动切换幻灯片 | | `pauseOnHover` | true | 鼠标悬停时是否暂停自动播放 | | `autoplayInterval` | 7000 | 定义幻灯片切换的时间跨度 | | `videoautoplay` | true | 定义是否自动开始播放视频 | | `videomute` | true | 定义是否静音播放视频 | | `kenburns` | false | 定义是否启用 Ken Burns 效果 | | `kenburnsanimations` | uk-animation-middle-left, uk-animation-top-right, uk-animation-bottom-left, uk-animation-top-center, uk-animation-bottom-right | 动画方向 | | `slices` | 15 | 定义碎片的数量，如果启用了 "Slice" 过渡效果的话。 | ### 事件 | 名称 | 参数 | 描述 | | --- | --- | --- | | `show.uk.slideshow` | event, next slide, current slide | 新的一页显示时触发（动画完成后） | | `beforeshow.uk.slideshow` | event, next slide, current slide | 新的一页显示前触发（动画完成前） |

# 滑块集/Slideset 创建条目的组和集合，并允许循环显示。 ## 用法 使用这个组件需要为容器元素添加 `data-uk-slideset` 属性。添加 `default` 选项到 `data-uk-slideset` 属性，调整一个滑块集中条目的个数。 注意 此组件需要额外添加 `slideset.js` 文件，在`js/components`文件夹中。 ### Example  ### Markup ``` ``` * * * ## 导航/Navigations 为滑块集添加导航，只需使用 `uk-slideset-nav` 类。它将动态地创建一个基于现有滑块数量的导航。 ### Markup ``` ``` 要切换相邻的滑块，使用 `data-uk-slideset-item` 属性，并设置该属性的值为 `next` 和 `previous`。这些带有 `data-uk-slideset-item` 属性的元素必须放在带有 `data-uk-slideset` 属性的容器中。 ### Markup ``` ``` * * * ### 滑动导航和圆点导航/Slidenav and Dotnav 你可以使用 UIkit 的其他任意组件来做滑块集的导航。比如 [Slidenav](slidenav.html) 和 [Dotnav](dotnav.html) 可以做出像下面例子这样的导航。 #### Example  #### Markup ``` ``` * * * ## 响应式条目/Responsive items 滑块集支持基于条目可见性的媒体查询。只需添加一个断点选项到 `data-uk-slideset` 属性中，比如 `small`, `medium`, `large` 。并设置在该断点宽度以上的视口中你想要显示的条目数，如下面例子所示： ### Example  ### Markup ``` ``` * * * ## 动画/Animations 这里有那么多的动画可以用在滑块集里，用来显示下一批滑块。只要为 `data-uk-slideset` 添加 `animation` 选项并设置你想要的动画。动画的持续时间可以通过设置 `duration` 选项来修改。 | 动画 | 描述 | | --- | --- | | `fade` | 淡入淡出 | | `scale` | 缩放 | | `slide-horizontal` | 水平滑入滑出 | | `slide-vertical` | 垂直滑入滑出 | | `slide-top` | 从顶部滑出，从顶部滑入 | | `slide-bottom` | 从底部滑出，从底部滑入 | ### Example - 在下拉框里选你想要预览的  ### Markup ``` ``` * * * ## 过滤/Filter 你还可以使用过滤来实现只显示滑块集中特定的条目。为此，需要为每个过滤控件添加 `data-uk-filter` 属性来规定它们过滤的分类。然后还要为每个滑块条目添加 `data-uk-filter` 属性来规定它们各自属于哪个分类。 注意 过滤控件可以放在滑块集中，或者，为过滤控件添加 `controls` 选项到 `data-uk-slideset` 属性中，并将滑块集的 id 设置在该选项中。如下面的例子： ### Example  ### Markup ```

``` * * * ## JavaScript 选项 | 选项 | 可用值 | 默认值 | 描述 | | --- | --- | --- | --- | | `default` | integer | 1 | 一个滑块集中默认可见条目数 | | `small` | integer | null | 小视口（small）中显示的条目数 | | `medium` | integer | null | 中视口（medium）中显示的条目数 | | `large` | integer | null | 大视口（large）中显示的条目数 | | `xlarge` | integer | null | 特大视口（Xlarge）中显示的条目数 | | `animation` | string | 'fade' | 动画的名字 | | `duration` | integer | 200 | 以毫秒为单位的动画持续时间 | | `delay` | integer | 100 | 一个滑块集中多个条目之间的动画延时。 | | `filter` | string | '' | 滑块条目过滤 | | `autoplay` | Boolean | false | 定义滑块集条目是否自动播放 | | `pauseOnHover` | Boolean | true | 鼠标悬停在滑块集上时，赞同自动播放 | | `autoplayInterval` | integer | 7000 | 切换滑块集条目的时间间隔 | ### 手动初始化 ``` var slideset = UIkit.slideset(element, { /* options */ }); ``` ### 事件 | 名称 | 参数 | 描述 | | --- | --- | --- | | `show.uk.slideset` | event, set | 滑块集显示时触发 |

# 滚动条/Slider 创建一个可以作为响应式旋转木马滚动条的条目列表。 滚动条能响应式地显示元素，可以通过鼠标和触摸手势滚动。 ## 用法 要使用滚动条组件，需要为包含 `.uk-slider-container` 元素的容器元素添加 `data-uk-slider` 属性。添加条目的列表，并为此列表添加 `.uk-slider` 类。使用 `.uk-width-*` 和 `.uk-grid-width-*` 类以确定每次显示多少个元素。 注意 使用此组件需要额外添加 `slider.css` 文件，在`css/components`文件夹中。此组件需要额外添加 `slider.js` 文件，在`js/components`文件夹中。 ### Example  ### Markup ``` ``` * * * ## 导航/Navigation 滚动条本身可以使用鼠标点击和拖拽或者触屏设备中滑动进行滚动。添加一个可以点击的滑动导航也是个好主意。滑动导航添加的箭头按钮会在鼠标悬停在滑动条上时显示出来。 ### Example ``` ``` * * * ## 居中模式/Center Mode 默认情况下，滚动条的元素总是对齐滚动条容易的左边缘。如果你想让元素居中，设置 `center` 属性的值为 `true` 即可。 注意 被居中的列表元素通常会被添加 `.uk-active` 类。如果你想高亮显示居中的元素，添加该类名即可。 ### Example  ### Markup ``` ``` * * * ## 禁用无限滚动 默认情况下，滚动条循环显示所有条目。要禁用这种行为，设置 `infinite` 参数为 `false` 即可。在启用或禁用居中模式中都同样有效。 ### Example  ### Markup ``` ``` * * * ## 条目排水沟/Item gutter 如果你想为滚动条中的元素添加间距，添加 `.uk-grid` 类到滚动条容器即可。元素将会根据网格排水沟尺寸被分隔开。 注意 你可以使用网格的修饰类 `uk-grid-medium` 和 `uk-grid-small` 来调整排水沟的尺寸。 ### Example  * * * ## 条目宽度/Item width 如果要设置滚动条中各元素的宽度，使用 UIkit 网格中的宽度类即可。既可以在滚动条容器上使用 `uk-grid-width-*` 类名，也可以为列表中每个条目单独使用 `uk-width-*` 类名。 ### Example: 为条目单独设置宽度  ### Markup ``` ``` * * * ## 响应式行为 为了适应不同的视口，你可以使用网格的响应式类名。在下面的例子中，滚动条会在大视口中显示4个条目，在中视口中显示3个，在小视口中显示一个。 ### Example: 响应式宽度  ### Markup ``` ``` * * * ## 全屏模式 滚动条包含全屏模式，在全屏模式下，滚动条将延伸至100%的视口高度。 ### Markup ``` ``` * * * ## JavaScript 选项 | 选项 | 可用值 | 默认值 | 描述 | | --- | --- | --- | --- | | `center` | boolean | false | 条目居中模式 | | `threshold` | boolean | true | 移动鼠标触发元素拖动的阈值，以像素为单位。 | | `infinite` | boolean | true | 无限滚动 | | `activecls` | string | uk-active | 在居中模式中，添加到被选中条目上的类名。 | | `autoplay` | false | boolean | 是否让滚动条的内容条目自动切换 | | `pauseOnHover` | boolean | true | 鼠标悬停在滚动条上时暂停播放 | | `autoplayInterval` | integer | 7000 | 切换滚动条内容条目的时间间隔 | ### 手动初始化元素 ``` var slider = UIkit.slider(element, { /* options */ }); ``` ### 事件/Events | 事件名 | Parameter | 描述 | | --- | --- | --- | | `focus.uikit.slider` | event, index, item | 条目获得焦点时触发 |

# HTML 编辑器 创建可以实时预览并且带有语法高亮的富文本编辑器或Markdown编辑器。 这个HTML编辑器可以你在输入HTML或Markdown时，生成实时预览。它包含一个工具栏，帮助你无需任何代码就能进行文本的编辑、添加链接、图片、引用和列表等。本编辑器还为HTML代码和Markdown代码提供了语法高亮，并且你还能切换全屏模式，让你可以不受任何干扰专注于内容的撰写。 * * * ## 用法 使用这个组件，你首先必须引入必要的 [CodeMirror](http://codemirror.net/) 和 [marked](https://github.com/chjj/marked) 依赖。要实现它，只需要在项目的header加入适当的脚本代码就行。 注意 使用此组件需要额外添加 `htmleditor.css` 文件，在`css/components`文件夹中。此组件需要额外添加 `htmleditor.js` 文件，在`js/components`文件夹中。 ``` ``` 最后，再为 `<textarea>` 元素添加 `data-uk-htmleditor` 属性就行了！。 ### Example  ### Markup ``` ... ``` * * * ## Markdown 还可以在HTML编辑器中编写Markdown。只需为data属性添加 `markdown:true` 选项就行。 ### Example  ### Markup ``` ... ``` * * * ## 选项卡模式 也可以在Markdown与预览模式之间进行切换。只需添加 `data-uk-htmleditor="{mode:'tab'}` 属性。 ### Example  ### Markup ``` ... ``` * * * ## JavaScript 选项 这是如何通过属性设置选项的例子： ``` data-uk-htmleditor="{mode:'split', maxsplitsize:600}" ``` | 选项 | 可用值 | 默认值 | 描述 | | --- | --- | --- | --- | | `mode` | 'split', 'tab' | 'split' | 视图模式 | | `toolbar` | Array | [ "bold", "italic", "strike", "link", "picture", ... ] | 工具栏上显示的按钮列表 | | `maxsplitsize` | integer | 1000 | 触发由分割模式切换到选项卡模式的响应式行为的最小浏览器视口宽度。 | | `lblPreview` | 任意 string | 'Preview' | 预览模式的标签字符串（Label string） | | `lblCodeview` | 任意 string | 'Markdown' | 代码模式的标签字符串（Label string） | ### 手动初始化 ``` var htmleditor = UIkit.htmleditor(textarea, { /* options */ }); ```

# 日期选择器/Datepicker 创建带有日期选择器的可拨动触发的下拉菜单。 ## 用法 创建日期选择器，只需要为 `<input>` 元素添加 `data-uk-datepicker` 属性。还可以自定义日期的格式，为 `data-uk-datepicker` 属性添加 _format_ 选项就能实现。 注意 使用此组件需要额外添加 `datepicker.css` 文件，在`css/components`文件夹中。此组件需要额外添加 `datepicker.js` 文件，在`js/components`文件夹中。 日期选择器会检测 [选择表单组件](form-select.html) 的JavaScript是否被加载。这允许你在日期选择器中通过一个选择表单快捷地切换年月。 ### Example  ### Markup ```

``` * * * ## JavaScript 选项 这是关于如何通过属性设置选项的例子： ``` data-uk-datepicker="{weekstart:0, format:'DD.MM.YYYY'}" ``` | 选项 | 可用值 | 默认值 | 描述 | | --- | --- | --- | --- | | `weekstart` | integer (0..6) | 1 | 每周开始的第一天 | | `i18n` | JSON object | { months:['January',...], weekdays:['Sun',..,'Sat'] } | 日期的称呼 | | `format` | any combination of DD, MM and YYYY | 'DD.MM.YYYY' | 日期格式 | | `offsettop` | integer | 5 | 输入值的偏移量 | | `minDate` | bool (false to ignore the option) string (date as in `format`) integer (offset in days from current date) | false | 最小日期 | | `maxDate` | bool (false to ignore the option) string (date as in `format`) integer (offset in days from current date) | false | 最大日期 | | `pos` | 'auto', 'top', 'bottom' | 'auto' | 日期选择器出现的位置 | ### 手动初始化 ``` var datepicker = UIkit.datepicker(element, { /* options */ }); ``` ### 事件 | 名称 | 参数 | 描述 | | --- | --- | --- | | `show.uk.datepicker` | event | 日期选择器菜单显示时触发 | | `hide.uk.datepicker` | event | 日期选择器菜单隐藏时触发 | | `update.uk.datepicker` | event | 日历渲染时触发 |

# 自动完成/Autocomplete 创建允许在输入时从预生成列表中进行选值的输入框。 ## 用法 要使用这个组件，需要添加 `.uk-autocomplete` 类到一个包含 `input` 元素的 `<div>` 中。为了使自动完成输入框所需要的JavaScript生效，你还需要添加 `data-uk-autocomplete` 属性。添加 `{source:'PATH/TO/RESULTS'}` 到data属性中，并设置需要用JSON进行格式化的自动完成列表的路径 ([示例](../tests/components/_autocomplete.json))。 [下拉菜单](dropdown.html)会被注入需要显示出来的自动完成建议。你甚至可以用键盘上的上下键来浏览下拉菜单。 注意 使用此组件需要额外添加 `autocomplete.css` 文件，在`css/components`文件夹中。此组件需要额外添加 `autocomplete.js` 文件，在`js/components`文件夹中。 ### Example  提示 尝试输入这些词语： Hamburg, New York, Moscow or Amsterdam. ### Markup ``` ``` * * * ## 自定义模板 你还可以通过创建自定义模板使结果以不同的形式显示出来。 ### Example  ### Markup ``` ``` ## JavaScript 选项 | 选项 | 可用值 | 默认值 | 描述 | | --- | --- | --- | --- | | `source` | url, array, callback function | [] | 数据源 | | `minLength` | integer | 3 | 触发自动完成的最小输入长度 | | `param` | string | search | 发送ajax请求时的查询名称（Query name） | | `delay` | integer | 300 | 停止输入后的延时 | | `flipDropdown` | boolean | false | 翻转显示结果的下拉菜单 | ### 手动初始化 ``` var autocomplete = UIkit.autocomplete(element, { /* options */ }); ``` ### 事件 | 名称 | 参数 | 描述 | | --- | --- | --- | | `selectitem.uk.autocomplete` | event, data, acobject | 某个值被选择时触发 | | `show.uk.autocomplete` | event | 自动完成下拉菜单显示时触发 |

# 灯箱/Lightbox 利用[模态对话框](modal.html)为图片和视频创建一个别致的灯箱。 ## 用法 要使用这个组件，添加 `data-uk-lightbox` 属性到一个链接到图片的锚文本中。如果title属性存在，它将会被显示为灯箱的标题。 注意 此组件需要额外添加 `lightbox.js` 文件，在`js/components`文件夹中。 ### Example  ### Markup ``` ... ``` * * * ## 组/Groups 你可以链接多个图片到同一个灯箱中，并在灯箱内切换显示，就是一个画廊了。只需添加 `{group:'my-group'}` 选项到每个单元的data属性，并且每个单元使用同一个grou名称，以显示在同一个灯箱中。你需要确保你已经引入了 [滑动导航组件](slidenav.html) 的CSS，这样你才能在灯箱里切换显示各个单元。 ### Example  ### Markup ``` ... ``` * * * ## 不同的内容源 灯箱并不限于图片展示。其他的媒体，比如视频，也可以显示在灯箱中，它会通过判断路径自动生成能正常的输出效果。 ### Example  * * * ### 内容类型 如果路径中没有文件扩展名，只需要添加 `data-lightbox-type="image"` 属性，视频就能正常播放了。 * * * ## JavaScript 选项 | 选项 | 可用值 | 默认值 | 描述 | | --- | --- | --- | --- | | `group` | string | false | 组名用来将元素分组，作为画廊进行展示。 | | `duration` | integer | 400 | 画廊切换内容时的动画持续时间。 | | `keyboard` | boolean | true | 允许使用键盘翻页 | ### 手动初始化 ``` var lightbox = UIkit.lightbox(element, { /* options */ }); ``` ### 创建动态灯箱 ``` var lightbox = UIkit.lightbox.create([ {'source': 'http://url/to/video.mp4', 'type':'video'}, {'source': 'http://url/to/image.jpg', 'type':'image'} ]); lightbox.show(); ``` ### 事件 | 名称 | 参数 | 描述 | | --- | --- | --- | | `showitem.uk.lightbox` | event, data | 灯箱显示时 |

# JAVASCRIPT组件

# 进度条/Progress 为进度条定义不同样式。 ## 用法 进度条由背景和进度条本身组成，用来体现增长。注意 使用此组件需要额外添加 `progress.css` 文件，在`css/components`文件夹中。 | Class | 描述 | | --- | --- | | `.uk-progress` | 该类用在父元素来创建进度条的背景。 | | `.uk-progress-bar` | 该类需要被添加至子元素用于创建实际的进度条。 | ### Example  ### Markup ``` ``` * * * ## 尺寸调整 添加 `.uk-progress-mini` 或 `.uk-progress-small` 类用于改变进度条的尺寸。 #### Example  ### Markup ``` ``` * * * ## 颜色调整 要在您的进度条中应用不同的颜色，仅需添加 `.uk-progress-success`，`.uk-progress-warning` 或 `.uk-progress-danger`类。 #### Example  ### Markup ``` ``` * * * ### 条纹 使用 `.striped` 类，创建一个带条纹的进度条。 #### Example  ### Markup ``` ``` 甚至可以使条纹动起来。为此，仅需添加 `.uk-active` 类。 #### Example  ### Markup ``` ``` * * * ### 组合 进度条组件的所有调整类可以互相组合使用。 #### Example  ### Markup ``` ```

# 占位符 创建一个占位符空间，可以用于拖拽上传文件。 ## Usage 这个组件适用于设计一些特殊的区域来创建一个占位符空间. 只需要添加 `.uk-placeholder` 类到 `<div>` 元素中。注意 使用此组件需要额外添加 `placeholder.css` 文件，在`css/components`文件夹中。 ### Example  ### Markup ``` ``` * * * ### 大空间占位符 你还可以在占位符空间上增加高度，使用 `.uk-placeholder-large` 类。 ### Example