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);

UIkit3.x文档