UIkit3.x文档

JavaScript

Once you have 安装UIkit后, 通过将JavaScript文件添加到 <head> 部分中,将其包含在页面上。 您还可以选择使用 defer 属性来延迟脚本执行。

<script src="js/uikit.min.js"></script>
<script src="js/uikit-icons.min.js"></script>


UIkit和响应式JavaScript框架

UIkit正在侦听DOM操作,并且会在将组件插入DOM或从DOM中删除时自动初始化,连接和断开组件。因此,它可以轻易地与Vue.js Vue.js 以及React这一类的JavaScript框架一起使用。

Note 您当前正在查看的UIkit网站及其文档是通过这种方式构建的。 这是如何集成 UIkit 和 Vue.js 的完美示例。 前往 Github 仓库 看看好的设置看起来是什么样子。


组件用法

您可以通过向HTML元素添加属性 uk-* 或者 data-uk-* 属性来使用UIkit组件,这是UIkit使用其组件的最佳实践,应始终首先考虑。

<div uk-sticky="offset: 50;"></div>

<div data-uk-sticky="offset: 50;"></div>

Note React 仅适用于 data-uk-* 前缀。

您还可以通过JavaScript初始化组件,并将它们应用于文档中的元素。

var stickys = UIkit.sticky('#sticky', {
    offset: 50
});


组件配置

每个组件都带有一组配置选项,您可以自定义它们的行为。可以在每个实例级别或全局级别上设置选项。

实例

可以设置选项:

使用 key: value; 这样的格式来设置

<div uk-sticky="offset: 50; top: 100;"></div>

以有效的JSON格式,

<div uk-sticky='{"offset": 50, "top": 100}'></div>

具有单一属性,

<div uk-sticky offset="50" top="100"></div>

或作用于带有 data-前缀的单个属性

<div uk-sticky data-offset="50" data-top="100"></div>

对于 Primary 选项, 如果它是属性值中的唯一选项,则可以省略它的键。请查看特定的组件文档,以找到哪个选项是主要Primary 选项。

<span uk-icon="home"></span>

您还可以通过编程将选项传递给组件构造函数。

// 传递选项对象。
UIkit.sticky('.sticky', {
    offset: 50,
    top: 100
});

// 如果组件支持主选项的话。
UIkit.drop('#drop', 'top-left');

优先顺序

通过component属性传递的选项拥有最高优先级,其次是单个属性,再然后是JavaScript。

<div uk-sticky="offset: 50;" offset="100"></div>

<!-- 偏移量为50 -->

全局

可以通过扩展组件来全局更改组件选项。

UIkit.mixin({
    data: {
        offset: 50,
        top: 100
    }
}, 'sticky');


程序化使用

通过编程,可以使用JavaScript中的 element, options 参数格式来初始化组件。 The element数可以是任何 Node, selector 或者 jQuery object. 您将收到初始化的组件作为返回值。Functional Components (例如Notification) 应忽略 element 参数

// 传递选择器和选项对象。
var sticky = UIkit.sticky('.sticky', {
    offset: 50,
    top: 100
});

// 功能组件应省略“ element”参数。
var notifications = UIkit.notification('MyMessage', 'danger');

Note 选项名称必须用驼峰命名法表示,比如show-on-up 变成 showOnUp.

初始化后,您可以通过调用相同的初始化函数(省略options参数)来获取组件。

// Sticky 是之前初始化的组件
var sticky = UIkit.sticky('.sticky');

Note 对css选择器使用 UIkit[componentName](selector) 将始终只返回第一个匹配项!如果需要访问所有实例,请先 查询 元素。然后分别对每个元素应用 – UIkit[componentName](element)

以编程方式初始化组件使您可以直接调用其功能。

UIkit.offcanvas('#offcanvas').toggle();

任何带下划线前缀的组件函数和变量均被视为内部API的一部分,它们可能会在任何给定时间更改。

每个组件都会触发您可以响应的DOM事件。 例如,当Modal为显示状态或 Scrollspy 元素变为可见时。

UIkit.util.on('#offcanvas', 'show', function () {
    // do something
});

组件的文档页面列出了其事件。

有时,诸如Grid或Tab之类的组件会隐藏在标记中。 与切换台Switcher, 模态组件Modal 或 Dropdown下拉组件结合使用时,可能会发生这种情况。 一旦可见,就需要调整或固定其高度和其他尺寸。

UIkit提供了几种更新组件的方法。 省略 type 参数将触发update 事件。

// 调用在元素本身(父元素和子元素)上注册的组件的更新挂钩。
UIkit.update(element = document.body, type = 'update');

// 更新组件本身。
component.$emit(type = 'update');

如果需要确保某个组件已被正确销毁(例如,从DOM中删除后),则可以调用其 $destroy 函数。

// 销毁组件。 例如,取消绑定其事件监听器
component.$destroy();

// 同时销毁组件,从DOM中删除元素。
component.$destroy(true);