跳到主要内容

文档

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>

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

<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 参数可以是任何 NodeselectorjQuery object。你将收到初始化的组件作为返回值。功能组件(例如 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 的一部分,这些 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 之后但在其在页面上初始化组件之前执行代码。

此钩子允许你注册自定义组件或组件 mixin。

你可以通过监听 UIkit 在文档上触发的 uikit:init 事件来挂钩到生命周期中的此步骤。

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