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 中移除。这样，它就可以轻松地与 JavaScript 框架（如 Vue.js 和 React）一起使用。

组件用法

您可以通过将 uk-* 或 data-uk-* 属性添加到您的 HTML 元素来使用 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>

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

<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 实例。

编程方式使用

在编程方式中，可以使用 element, options 参数格式在 JavaScript 中初始化组件。 element 参数可以是任何 Node、selector 或 jQuery 对象。您将收到已初始化的组件作为返回值。 函数式组件（例如 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');

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

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

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

所有以下划线为前缀的组件函数和变量都被认为是内部 API 的一部分，可能会在任何时候发生更改。

每个组件都会触发 DOM 事件，您可以对这些事件做出反应。例如，当模态框显示或滚动侦听元素变为可见时。

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

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

注意组件通常会触发相同名称的事件（例如“show”）。通常，事件冒泡到 DOM。检查事件目标，以确保事件是由所需的组件触发的。

有时，组件（如网格或选项卡）在标记中是隐藏的。当与切换器、模态框或下拉列表结合使用时，可能会发生这种情况。一旦它们变为可见，它们需要调整或修复它们的高度和其他尺寸。

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 初始化

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

此钩子允许您注册自定义组件或组件混合。

您可以通过监听 UIkit 在文档上触发的 uikit:init 事件来介入此生命周期步骤。

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