JavaScript

安装 UIkit之后，把 JavaScript 文件添加到页面的 <head> 部分即可引入。你也可以使用 defer 属性来延迟脚本执行。

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

UIkit 与响应式 JavaScript 框架

UIkit 会监听 DOM 变化，并在组件被插入或移除 DOM 时自动初始化、连接和断开组件。因此它可以很方便地与 Vue.js 和 React 等 JavaScript 框架一起使用。

组件用法

你只需为 HTML 元素添加 uk-* 或 data-uk-* 属性，就能使用 UIkit 组件，无需编写一行 JavaScript。这是 UIkit 使用组件的最佳实践，应当始终优先考虑。

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

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

注意 React 仅支持 data-uk-* 前缀。

你也可以通过 JavaScript 初始化组件，并将其应用到文档中的元素上。

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

将选择器或元素作为第一个参数传给组件函数，即可获取已初始化的组件。

var sticky = UIkit.sticky('#sticky');

省略第二个参数不会重新初始化组件，而是作为 getter 函数使用。

组件配置

每个组件都提供一组配置选项，用于自定义其行为。你可以在单个实例级别或全局设置这些选项。

实例

选项可以按下方的示例设置。

使用 key: value; 格式：

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

使用合法的 JSON 格式：

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

使用独立的属性：

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

或使用带 data- 前缀的独立属性：

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

对于 Primary 选项，如果它是属性值中唯一的选项，可以省略其键名。请查看具体组件的文档，了解哪个选项是 Primary 选项。

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

你也可以通过编程方式把选项传给组件构造函数。

// Passing an options object.
UIkit.sticky('.sticky', {
    offset: 50,
    top: 100
});

// If the component supports Primary options.
UIkit.drop('#drop', 'top-left');

优先级

通过组件属性传入的选项优先级最高，其次是独立属性，最后是 JavaScript。

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

<!-- The offset will be 50 -->

全局

通过扩展组件可以全局修改组件选项，它只影响此后新建的实例。

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

省略第二个参数，自定义行为将应用于此后创建的每个 UIkit 实例。

编程方式使用

在 JavaScript 中，组件可以用 element, options 参数格式来初始化。element 参数可以是任意 Node、selector 或 jQuery object。返回值是初始化好的组件。Functional Components（例如 Notification）应省略 element 参数。

// Passing a selector and an options object.
var sticky = UIkit.sticky('.sticky', {
    offset: 50,
    top: 100
});

// Functional components should omit the 'element' argument.
var notifications = UIkit.notification('MyMessage', 'danger');

注意选项名称必须使用驼峰式写法，例如 show-on-up 应写作 showOnUp。

初始化之后，你可以调用同一个初始化函数并省略 options 参数来获取组件。

// Sticky is now the prior initialised components
var sticky = UIkit.sticky('.sticky');

注意使用 CSS 选择器调用 UIkit[componentName](selector) 时，始终只返回第一个匹配项！如果你需要访问所有实例，请先查询这些元素，然后对每个元素分别应用 getter —— UIkit[componentName](element)。

以编程方式初始化组件，可以让你直接调用其函数。

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

任何以下划线为前缀的组件函数和变量都属于内部 API，可能随时变更。

每个组件都会触发 DOM 事件，你可以对其作出响应。例如模态框显示时，或 Scrollspy 元素变为可见时。

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

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

注意组件经常会触发同名事件（例如 'show'）。通常事件会在 DOM 中冒泡。请检查事件目标，确认事件是由期望的组件触发的。

有时，像 Grid 或 Tab 这样的组件在标记中是隐藏的。这可能在它们与 Switcher、Modal 或 Dropdown 组合使用时发生。一旦它们变为可见，就需要调整或修正其高度和其他尺寸。

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

// Calls the update hook on components registered on the element itself, its parents and children.
UIkit.update(element = document.body, type = 'update');

// Updates the component itself.
component.$emit(type = 'update');

如果你需要确保组件被正确销毁，例如在它从 DOM 中移除时，可以调用它的 $destroy 函数。

// Destroys the component. For example unbind its event listeners.
component.$destroy();

// Also destroys the component, but also removes the element from the DOM.
component.$destroy(true);

组件生命周期钩子

使用 UIkit.mixin() 扩展组件时，可以定义生命周期钩子函数，在组件生命周期的特定时刻运行代码。

钩子	运行时机
`created`	在状态、方法和计算属性初始化之后，组件挂载之前运行。
`beforeConnect`	在属性初始化之后，事件处理器、观察者、监听器和更新处理器设置之前运行。
`connected`	在连接设置完成之后、初次更新之前运行。
`beforeDisconnect`	在清理连接相关的处理器和观察者之前运行。
`disconnected`	在连接相关的清理完成之后运行。
`destroy`	在调用 `$destroy()` 时运行，位于断开连接之后、组件从元素解绑之前。

例如，使用 connected 和 disconnected 来设置和清理依赖组件元素已连接到文档的行为。

UIkit.mixin({
    connected() {
        // Set up behavior for this.$el.
    },

    disconnected() {
        // Clean up behavior set up while connected.
    }
}, 'sticky');

生命周期钩子是组件选项，不是 DOM 事件。当需要对组件行为（例如模态框被显示）作出响应时，请使用组件事件。

UIkit 初始化

你可能需要在 UIkit 加载之后、但在它初始化页面上的组件之前执行代码。

该钩子允许你注册自定义组件或组件混入。

你可以通过监听 UIkit 在文档上触发的 uikit:init 事件，挂接到生命周期的这个阶段。

document.addEventListener('uikit:init', () => {
    // do something
})