Переключатель Toggle

• Применение
• Переключение несколькольких элементов
• Пользовательский класс
• Анимации
• JavaScript options

Применение

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

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

Пример

Toggle

<button class="uk-button" data-uk-toggle="{target:'#toggle-id'}">...</button>

<div id="toggle-id">
    ...
</div>

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

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

Пример

Toggle

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

<button class="uk-button" data-uk-toggle="{target:'.my-class'}">...</button>

<div class="my-class">...</div>
<div class="my-class uk-hidden">...</div>

Пользовательский класс

Если вы не хотите переключать класс .uk-hidden, вы также можете добавить и переключать свой собственный класс.

Пример

Toggle

Примечание В этом примере использовался класс .uk-panel-box-primary из компонента Panel для переключения между различными стилями панели.

<button class="uk-button" data-uk-toggle="{target:'#my-id', cls:'uk-panel-box-primary'}">...</button>

<div id="my-id" class="uk-panel uk-panel-box">
    ...
</div>

Анимации

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

Пример

Toggle

<button class="uk-button" data-uk-toggle="{target:'#my-id', 
    animation:'uk-animation-scale-up, uk-animation-shake'}">...</button>

<div id="my-id">
    ...
</div>

JavaScript options

Это пример того, как установить параметры через атрибут:

data-uk-toggle="{target:'#my-id'}"