JavaScript

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

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

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

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

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

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

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

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

Вы можете извлечь уже инициализированный компонент, передав селектор или элемент в качестве первого аргумента функции компонента.

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

Пропуск второго параметра не будет повторно инициализировать компонент, но будет служить getter функцией.

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

Каждый компонент поставляется с набором параметров конфигурации, которые позволяют настраивать их поведение. Вы можете установить параметры на уровне экземпляра или глобально.

Экземпляр

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

в формате key: value;:

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

в формате JSON:

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

как самостоятельные атрибуты:

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

как отдельные атрибуты с префиксом data-:

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

Для Primary опций ключ может быть опущен, если это единственный параметр в значении атрибута. Пожалуйста, ознакомьтесь с документацией по конкретному компоненту, чтобы узнать, какая опция является Primary.

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

Вы также можете программно передавать параметры конструктору компонентов.

// Передача параметров.
UIkit.sticky('.sticky', {
    offset: 50,
    start: 100
});

// Если компонент поддерживает Primary options.
UIkit.drop('#drop', 'top-left');

Приоритет

Параметры, передаваемые через атрибут компонента, будут иметь наивысший приоритет, затем идут самостоятельные/отдельные атрибуты и потом уже JavaScript.

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

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

Глобально

Параметры компонента могут быть изменены глобально. Это повлияет только на вновь созданные экземпляры.

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

Если не указывать второй параметр, пользовательское поведение будет применяться к каждому экземпляру UIkit, созданному впоследствии.

Программное использование

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

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

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.

Примечание Components often trigger event with the same name (e.g. 'show'). Usually events bubble through the DOM. Check the event target, to ensure the event was triggered by the desired component.

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

Инициализация UIkit

Вам может понадобиться выполнить код после загрузки UIkit, но до того, как он инициализирует свои компоненты на странице.

Этот хук позволяет регистрировать пользовательские компоненты или компонентные примеси (миксины, mixins).

Вы можете подключиться к этому этапу жизненного цикла, прослушивая событие uikit:init в документе.

document.addEventListener('uikit:init', () => {
    // делаем что-то
})