Возможности: скрыть, переключить или изменить внешний вид различного содержимого с помощью переключателя. Пользовательский класс с добавлением нескольких анимаций к элементам при переключении между ними.
Руководство
Руководство по использованию Toggle
Чтобы применить компонент Переключатель, просто добавьте атрибут uk-toggle="target: #ID" к элементу <button> или <a>. Вы можете использовать любой селектор с подобным атрибутом.
Переключатель можно использовать для добавления или удаления класса, удаления атрибута из элемента. По умолчанию добавляется атрибут hidden, скрывающий элемент.
Вы также можете переключать несколько элементов одновременно. Просто добавьте к атрибуту uk-toggle опцию target: SELECTOR и используйте селектор, который применяется ко всем элементам.
В примере ниже добавляется атрибут hidden к одному из элементов,
чтобы отображался только один определенный элемент.
Toggle переключает состояния между обоими элементами.
<button class="uk-button uk-button-default" type="button" uk-toggle="target: .toggle">Переключатель Toggle</button>
<p class="toggle">Привет! Переключаем?</p>
<p class="toggle" hidden>Готово! Да ты супер!</p>
Пользовательский класс
Если вы не хотите переключать атрибут hidden, вы также можете переключить пользовательский класс.
Просто добавьте к атрибуту uk-toggle опцию cls: CLASS.
Компонент Toggle позволяет добавлять анимацию к элементам при переключении между ними. Просто добавьте один из классов .uk-animation-* из компонента «Анимации» к параметру animation. Класс будет применен к анимации как на выходе, так и в обратную сторону. Вы можете использовать любую анимацию, просто добавьте соответствующий класс.
Вы также можете применить несколько анимаций из компонента «Анимации». Таким образом, вы можете создать свой собственный пользовательский класс для переходов.
При переключении нескольких элементов с анимацией вы можете подождать, пока не пройдет первая анимация, прежде чем анимировать второй элемент. Для этого просто добавьте параметр queued: true в атрибут uk-toggle.
При использовании режима media также необходимо добавить опцию media с одним из возможных значений. Например, добавьте число в пикселях, например, 640 или точку останова, например @s, @m, @l или @xl. Без параметра target переключатель переключает состояние переключателя на себя. Это означает, что он будет переключаться между различными состояниями, которые определены в опции cls, в зависимости от ширины области просмотра, в которой он отображается.
<!-- "Primary" модификатор будет применяться только на больших экранах -->
<div class="uk-card uk-card-default" uk-toggle="cls: uk-card-primary; mode: media; media: @l"></div>
<div class="uk-card uk-card-default uk-card-body uk-width-medium" uk-toggle="cls: uk-card-primary; mode: media; media: @l">
"Primary" на больших экранах
</div>
Примечание
Начальное состояние переключения зависит от опции cls.
Это либо первый данный класс в списке, разделенном пробелами, либо, если задано значение false, атрибут hidden.
Если задано более одного класса, другие классы просто переключаются при изменении состояния.
Параметры для атрибута
При использовании компонента Toggle к атрибуту можно применить любой из этих параметров.
Разделяйте несколько вариантов точкой с запятой.
Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.
Опции компонента
Опция
Значение
По умолчанию
Описание
target
String
false
CSS селектор элемента (ов) для переключения.
mode
String
click
Разделенный запятыми список режимов поведения триггера. (hover, click, media)
cls
String
false
Класс, который переключается. По умолчанию атрибут hidden.
media
Number, String
false
В режиме media точка останова, которая вызывает переключение - ширина в виде целого числа (например, 640) или точка останова (например, @s, @m, @l, @xl) или любой допустимый запрос мультимедиа (например, (min-width: 900px) ).
animation
String
false
Разделенные пробелами имена используемых анимаций, разделенные запятой для анимации.
duration
Number
200
Продолжительность анимации в миллисекундах.
queued
Boolean
true
Переключение целей последовательно.
target является Primary опцией.
Если target это единственный параметр в значении атрибута, то её ключ можно не использовать.
<span uk-toggle=".my-class"></span>
JavaScript
Узнайте больше о использовании JavaScript
в компонентах фреймворка UIkit 3.
Инициализация
UIkit.toggle(element, options);
События
Следующие события будут инициированы для элементов компонента «Toggle»:
Имя события
Описание
beforeshow
Срабатывает до отображения элемента. Может предотвратить отображение, вернув false.
show
Срабатывает после отображения элемента.
shown
Запускается после завершения анимации показанного элемента.
beforehide
Срабатывает до того, как элемент скрыт. Может предотвратить скрытие, вернув false.
hide
Срабатывает после запуска анимации скрытия элемента.
hidden
Срабатывает после того, как элемент скрыт.
Методы
Для компонента «Toggle» доступны следующие методы:
Toggle
UIkit.toggle(element).toggle();
Переключает цель переключателя.
Доступность
Компонент Toggle автоматически устанавливает соответствующие роли, состояния и свойства WAI-ARIA.
Элемент переключения имеет роль button если используется элемент <a>.
Чтобы реализовать шаблон Disclosure (Show/Hide) Pattern, задайте атрибут aria-expanded вручную. Он будет автоматически обновляться при переключении.