JavaScript

После того, как вы установили UIkit 3, добавьте на свою страницу файлы JavaScript, добавив их в содержимое тега <head>. Вы также можете использовать атрибут defer для задержки выполнения скрипта до тех пор, пока вся страница не будет загружена полностью.

<!-- вариант 1 -->
<script src="js/uikit.min.js"></script>
<script src="js/uikit-icons.min.js"></script>

<!-- вариант 2 с defer -->
<script src="js/uikit.min.js" defer></script>
<script src="js/uikit-icons.min.js" defer></script>

UIkit 3 и реактивные JavaScript фреймворки

UIkit прислушивается к манипуляциям с DOM и автоматически инициализирует, подключает и отключает компоненты, когда они вставляются или удаляются из DOM. Таким образом, его легко можно использовать с JavaScript-фреймворками, такими как Vue.js и React.

Примечание Официальный веб-сайт UIkit с документацией на английском языке создан именно таким образом, демонстрируя на своём примере, как UIkit и Vue.js могут быть интегрированы.

Использование компонентов

Вы можете использовать компоненты UIkit 3 с добавлением атрибутов uk-* или data-uk-* к своим элементам HTML без написания каких-либо строк кода JavaScript. Это лучшее решение, которое всегда должно рассматриваться в первую очередь при использовании компонентов UIkit.

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

<div data-uk-sticky="offset: 70;"></div>
Примечание React будет работать только с префиксами data-uk-*.

Конечно, вы также можете инициализировать компоненты с помощью JavaScript и применять их к элементам вашего документа.

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

Конфигурация компонента

Each component comes with a set of configuration options that let you customize their behavior. You can set the options on a per instance level or globally.

Instance

Параметры могут быть установлены:

в формате 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>

For Primary options, its key may be omitted, if it's the only option in the attribute value. Please take a look at the specific component documentation to find which option is the Primary option.

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

You can also pass options to the component constructor programmatically.

// 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: 70;" offset="120"></div>

<!-- Смещение будет равняться 70-ти -->

Глобально

Параметры компонента могут быть изменены глобально.

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

Programmatic use

Programmatically, components may be initialized with the element, options arguments format in JavaScript. The element argument may be any Node, selector or jQuery object. You'll receive the initialized component as return value. Functional Components (e.g. Notification) should omit the element parameter.

// 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');
Примечание The options names must be in their camel cased representation, e.g. show-on-up becomes showOnUp.

After initialisation you can get your component by calling the same initialisation function, omitting the options parameter.

// Sticky is now the prior initialised components
var sticky = UIkit.sticky('.sticky');
Примечание Using UIkit[componentName](selector) with css selectors will always return the first occurrence only! If you need to access all instances do query the elements first. Then apply the getter to each element separately - UIkit[componentName](element).

Initializing your components programmatically gives you the possibility to invoke their functions directly.

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

Any component functions and variables prefixed with an underscore are considered as part of the internal API, which may change at any given time.

Each component triggers DOM events that you can react to. For example when an Modal is shown or a Scrollspy element becomes visible.

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

The component's documentation page lists its events.

Sometimes, components like Grid or Tab are hidden in the markup. This may happen when used in combination with the Switcher, Modal or Dropdown. Once they become visible, they need to adjust or fix their height and other dimensions.

UIkit offers several ways of updating a component. Omitting the type parameter will trigger an update event.

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

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

If you need to make sure a component is properly destroyed, for example upon removal from the DOM, you can call its $destroy function.

// 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);
Документация
Компоненты