Компонент Переключатель Toggle

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

Руководство

Руководство по использованию Toggle

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

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

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

  • Вау! Зайчик

  • <div>
    <button class="uk-button uk-button-primary" type="button" uk-toggle="target: #toggle-usage">Toggle</button>
    <p id="toggle-usage">Вау! Зайчик</p>
</div>

Переключение нескольких элементов

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

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

В примере ниже добавляется атрибут 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. 

<button type="button" uk-toggle="target: #my-id; cls: uk-card-primary"></button>
<p id="my-id" class="uk-card uk-card-default"></p>
Примечание В этом примере используется класс .uk-card-primary для переключения между различными стилями карт.
  • Пользовательский класс
  • <button class="uk-button uk-button-default" type="button" 
        uk-toggle="target: #toggle-custom; 
                   cls: uk-card-primary
                   ">Переключатель Toggle
</button>
<div id="toggle-custom" class="uk-card uk-card-default uk-card-body uk-margin-small">Пользовательский класс</div>

Анимации

Компонент Toggle позволяет добавлять анимацию к элементам при переключении между ними. Просто добавьте один из классов .uk-animation-* из компонента «Анимации» к параметру animation. Класс будет применен к анимации как на выходе, так и в обратную сторону. Вы можете использовать любую анимацию, просто добавьте соответствующий класс.

<button type="button" uk-toggle="target: #my-id; animation: uk-animation-fade"></button>
<p id="my-id"></p>
  • Анимация!
  • <button class="uk-button uk-button-default" type="button" uk-toggle="target: #toggle-animation; animation: uk-animation-fade">Переключатель Toggle</button>
<div id="toggle-animation" class="uk-card uk-card-default uk-card-body uk-margin-small">Анимация!</div>
  • Переключить Toggle
    Анимация!
  • <a href="#toggle-a-animation" class="uk-button uk-button-default" uk-toggle="animation: uk-animation-slide-bottom">Переключить Toggle</a>
<div id="toggle-a-animation" class="uk-card uk-card-default uk-card-body uk-margin-small">Анимация!</div>

Несколько анимаций

Вы также можете применить несколько анимаций из компонента «Анимации». Таким образом, вы можете создать свой собственный пользовательский класс для переходов.

<button type="button" 
        uk-toggle="target: #my-id; animation: uk-animation-slide-left, uk-animation-slide-bottom"></button>
<p id="my-id"></p>
  • Анимация!
  • <button class="uk-button uk-button-default" type="button" 
        uk-toggle="target: #toggle-animation-multiple; animation: uk-animation-slide-left, uk-animation-slide-bottom">Переключатель Toggle</button>

<div id="toggle-animation-multiple" class="uk-card uk-card-default uk-card-body uk-margin-medium">Анимация!</div>

Анимации в очереди

При переключении нескольких элементов с анимацией вы можете подождать, пока не пройдет первая анимация, прежде чем анимировать второй элемент. Для этого просто добавьте параметр 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>

  • Анимация!

  • <div>
	<button class="uk-button uk-button-default" type="button" 
        uk-toggle="target: .toggle-animation-queued; animation: uk-animation-fade; queued: true; duration: 300">Переключатель Toggle</button>
        
    <p class="toggle-animation-queued uk-card uk-card-default uk-card-body uk-margin-medium">Анимация!</p>
    <p class="toggle-animation-queued uk-card uk-card-primary uk-card-body uk-margin-medium" hidden>Понравилось?</p>
</div>

Режимы

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

Значение Описание
hover Переключение будет срабатывать при наведении курсора мыши.
click Переключение будет срабатывать при нажатии. Это значение по умолчанию.
click, hover Переключение будет срабатывать при нажатии и наведении курсора.
media Поведение переключателя зависит от ширины области просмотра. Больше информации. 
<button type="button" uk-toggle="target: #my-id; mode: hover"></button>
<p id="my-id"></p>

  • Ч-что?

  • <button class="uk-button uk-button-default" type="button" uk-toggle="target: #toggle-hover; mode: hover">hover</button>

<p id="toggle-hover">Ч-что?</p>

Media

При использовании режима 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>
  • "Primary" на больших экранах 
  • <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 вручную. Он будет автоматически обновляться при переключении.