Документация UIkit 3 на русском

Главная
Javascript

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

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

UIkit и JavaScript-фреймворки

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

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

Внимание Не забываем, что отсутствие префикса data нервирует валидатор W3C. Если для вас это важно, используйте полный вариант написания.

Вы можете использовать компоненты UIkit путем добавления атрибутов uk-* или data-uk-* к необходимым элементам. Это лучшая практика использования компонентов UIkit. Обратите внимание: data-атрибуты теперь можно проставлять иначе, чем раньше. Например, вместо data-uk-sticky можно писать так:

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

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

Внимание React будет работать только с классическими дата-атрибутами data-uk-*.

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

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

Настройка компонентов

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

Примеры

Используйте следующие варианты устаноки:

Формат вида ключ: значение;,

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

формат JSON,

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

сокращенные data-атрибуты,

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

классические data-атрибуты с префиксом data-.

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

Для основного параметра значение ключа может быть опущено. В документации к различным компонентам указаны основные параметры и их опции.

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

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

// Передаем параметры объекта.
UIkit.sticky('.sticky', {
    offset: 50,
    top: 100
});

// Передаем параметры какого-либо компонента.
UIkit.drop('#drop', 'top-left');

Приоритет параметров

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

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

<!-- Задает смещение 50 -->

Глобальное изменение

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

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

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

Компоненты можно инициализировать с помощью JavaScript. При этом аргумент элемента может быть любым: Node, selector или объект jQuery . В результате JS вернет инициализированный компонент.Functional Components В случае с Notification параметр element можно не задавать.

// Передача селектора и объекта с параметрами.
var sticky = UIkit.sticky('.sticky', {
    offset: 50,
    top: 100
});

// В функциональных компонентах должен отсутствовать аргумент «элемент».
var notifications = UIkit.notification('MyMessage', 'danger');

Внимание Названия опций указывайтев верблюжьей нотации, т.е. show-on-up преобразуйте в showOnUp.

После инициализации вы можете вызывать компонент, обращаясь к той же функции инициализации, пропуская параметр options.

// Компонент Sticky предварительно инициализирован
var sticky = UIkit.sticky('.sticky');

Внимание Если вы совместно используете UIkit[componentName](selector) и селекторы css, функция вернет только первое вхождение! Если вы хотите иметь доступ ко всем экземплярам, сначала используйте соответствующий метод query. Затем примените метод getter к каждому элементу отдельно UIkit[componentName](element).

Программная инициализация компонентов дает возможность напрямую вызывать их функции.

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

Любые функции компонентов и переменные с префиксом подчеркивания рассматриваются как часть внутреннего API, который может меняться в любое время.

Каждый компонент вызывает триггер события, на которые вы можете навешивать что угодно. Например, когда отображается модальное окно или элемент Scrollspy становится видимым.

UIkit.util.on('#offcanvas', 'show', function () {
    // Какое-то событие
});

На страницах документации компонентов перечислены все их события.

Некоторые компоненты, например, Grid или Tab, могут быть скрыты в разметке. Это может происходит при их совместном использовании вместе с Switcher, Modal или Dropdown. Как только они становятся видимыми, им нужно задавать различные параметры: ширина, высота и т.д.

В UIkit используется несколько способов обновления состояния компонента. Пропуск параметра event вызывает событие update.

// Вызывает хук обновления для компонентов, зарегистрированных на самом элементе, его родителях и дочерних элементах.
UIkit.update(element = document.body, event = 'update');

// Обновляет сам компонент.
component.$emit(event = 'update');

Если вам нужно убедиться, что работа компонента прекращена, например, после удаления из DOM, вы можете вызвать его с помощью функции $destroy.

// Завершает работу компонента. Например, отменяет прослушивание событий.
component.$destroy();

// Тоже завершает работу компонента и вдобавок удаляет его из DOM.
component.$destroy(true);