Компонент Toggle

Компонент Uikit 3 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>
  • Что тут у нас?

  • <div>
        <button class="uk-button uk-button-default" type="button" uk-toggle="target: #toggle-usage">Toggle</button>
        <p id="toggle-usage">Что тут у нас?</p>
    </div>

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

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

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

  • <button class="uk-button uk-button-default" type="button" uk-toggle="target: .toggle">Toggle</button>
    <p class="toggle">Hello!</p>
    <p class="toggle" hidden>Bazinga!</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>
  • Пользовательский класс
  • <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-* из компонента Анимация. Можно задать разные классы для появления и исчезновения элементов. Если вы предпочитаете другую анимацию, используйте нужный другой класс.

<button type="button" uk-toggle="target: #my-id; animation: uk-animation-fade"></button>
<p id="my-id"></p>
  • Анимация
  • <button href="#toggle-animation" 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>

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

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

<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-small">Анимация</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>
  • Первая анимация

  • <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-small">Первая анимация</p>
    <p class="toggle-animation-queued uk-card uk-card-primary uk-card-body uk-margin-small" hidden>Вторая анимация</p>

Режимы

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

Значение Описание
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>

Режимы 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>
  • Работает на больших экранах
  • <div class="uk-card uk-card-default uk-card-body uk-width-medium" uk-toggle="cls: uk-card-primary; mode: media; media: @l">
        Работает на больших экранах
    </div>

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


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

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

Опция Значение По умолчанию Описание
target String false CSS селектор элемента, класс которого будет переключаться.
mode String click Разделенный запятыми список режимов поведения триггера. (hover, click, media)
cls String false Класс, который переключается. По умолчанию это атрибут hidden.
media Integer, String false Адаптивный режим, контрольная точка в виде целого числа, например, 640 или стандартный брекпойнт (например, @s, @m, @l, @xl). Также подойдет любой другой валидный медиа-запрос.
animation String false Разделенные пробелами имена анимаций, разделяются запятыми.
duration Number 200 Продолжительность анимации в миллисекундах.
queued Boolean true Переключения анимации после завершения предыдущей анимации.

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

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

JavaScript

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

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

UIkit.toggle(element, options);

События

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

Имя Описание
beforeshow Срабатывает появления объекта. Может отметить отображение, вернув false.
show Срабатывает после появления объекта.
shown Срабатывает после завершения анимации появления объекта.
beforehide Срабатывает до скрытия объекта. Может отменить скрытие, вернув false.
hide Срабатывает после запуска анимации скрытия элемента.
hidden Срабатывает после скрытия объекта.

Методы

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

Toggle

UIkit.toggle(element).toggle();

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