Компонент Toggle

Скрывайте, переключайте классы и изменяйте внешний вид чего угодно с помощью универсального переключателя.

Как использовать компонент Toggle в UIkit 3

Метод Toggle крайне популярен в Java Script, в честь него разработчики UIkit назвали свой компонент. По сравнению с предыдущими версиями, в UIkit 3 возможности компонента значительно расширились.

Чтобы применить Toggle, просто добавьте атрибут uk-toggle="target: #ID" к <button> или <a>. Можно использовать любой селектор с атрибутом переключения.

Переключатель можно использовать для добавления или удаления класса или атрибута из элемента. По умолчанию toggle переключает атрибут hidden для скрытия элементов.

<button uk-toggle="target: #my-id" type="button"></button>
<p id="my-id"></p>

Множественное переключение

С помощью компонента Toggle вы также можете переключать несколько элементов одновременно. Добавьте опцию target: SELECTOR к атрибуту uk-toggle и используйте селектор, который применяется ко всем элементам.

<button type="button" uk-toggle="target: .my-class"></button>
<p class="my-class"></p>
<p class="my-class"></p>

Внимание В этом примере мы добавили атрибут hidden к одному из элементов, так что будет показан только один элемент. Переключатель изменит видимые состояния между обоими элементами.

Пользовательский класс для переключения

Если вы не хотите использовать hidden, добавьте свой класс. Задайте опцию cls: CLASS для атрибута uk-toggle. В следующем примере мы используем класс .uk-card-primary для переключения стиля карточки.

<button type="button" uk-toggle="target: #my-id; cls: uk-card-primary"></button>
<p id="my-id" class="uk-card uk-card-default"></p>

Анимации

Компонент Toggle позволяет добавлять анимацию к элементам при переключении. Добавьте в опцию класс семейства .uk-animation-* из компонента Анимация. Можно задать разные классы для появления и исчезновения элементов. Если вы предпочитаете другую анимацию, используйте нужный другой класс.

<button type="button" uk-toggle="target: #my-id; animation: uk-animation-fade"></button>
<p id="my-id"></p>

Множественые анимации

Вы также можете применить несколько анимаций из компонента Анимации.

<button type="button" uk-toggle="target: #my-id; animation: uk-animation-slide-left, uk-animation-slide-bottom"></button>
<p id="my-id"></p>

Очередность анимациии

При переключении нескольких элементов с анимацией, вы можете дождаться окончания первой анимации, а затем анимировать второй элемент. Для этого просто добавьте параметр queued: true в атрибутuk-toggle.

<button type="button" uk-toggle="target: .my-class; animation: uk-animation-fade; queued: true"></button>
<p class="my-class"></p>
<p class="my-class"></p>

Режимы

Переключение может быть вызвано различными способами. Добавьте опцию mode к атрибуту uk-toggle и примените одно из перечисленных значений:

<button type="button" uk-toggle="target: #my-id; mode: hover"></button>
<p id="my-id"></p>

Режимы Toggle в зависимости от разрешения экрана

Toggle обзавелся отличной возможностью: изменение типа активации для различных устройств. Например, на ПК элемент будет срабатывать при наведении, а на мобильных устройствах — по клику.

При использовании режима media также необходимо добавить валидное значение, относящееся к контрольным точкам от @s до @xl. Без опциии target, ваша кнопка будет переключать состояния на себе. Таким образом, он будет переключаться между различными состояниями, которые определены в опции cls, в зависимости от ширины области просмотра, в которой он отображается.

<!-- Основной модификатор будет применяться только на больших экранах -->

<div class="uk-card uk-card-default" uk-toggle="cls: uk-card-primary; mode: media; media: @l"></div>

Внимание Начальное состояние переключения зависит от опции cls. Это либо первый заданный класс в списке, разделенном пробелами, либо, если он установлен в значение false для атрибута hidden. Если задано более одного класса, другие классы просто переключаются при изменении состояния.

Опции компонента

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

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

<span uk-toggle=".my-class"></span>

JavaScript

Подробнее о JavaScript компонентах UIkit.

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

UIkit.toggle(element, options);

События

Для компонента доступны следующие события:

Методы

Для компонента доступны следующие методы:

Toggle

UIkit.toggle(element).toggle();

Переключает состояние выбранного элемента.