Переключение

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

Использование

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

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

Пример

Переключение

Пример

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

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

Несколько элементов

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

Пример

Переключение

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

Разметки

<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 класс, вы можете также добавить свой собственный класс.

Пример

Переключение

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

Разметки

<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>

Анимации

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

Пример

Переключение

Разметки

<button class="uk-button" data-uk-toggle="{target:'#my-id', animation:'uk-animation-slide-left, uk-animation-slide-bottom'}">...</button>

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

JavaScript варианты

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

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