Переключатель контента

• Использование
• Переключение содержимого/контента
• Переключение нескольких разделов/блоков
• Анимации
• Пользовательские анимации
• Switcher и Subnav
• Switcher и Tab
• Switcher и Button
• Switcher и Nav
• JavaScript options

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

Компонент Switcher состоит из нескольких переключателей и связанных с ними элементами контента, содержимого. Добавьте к элементу атрибут data-uk-switcher="{connect:'#ID'}", который содержит переключатели, с тем же идентификатором, который используется для элемента, содержащего элементы содержимого. Добавьте класс .uk-switcher к тому же элементу. Обычно переключатель сочетается с другими компонентами, некоторые из которых будут показаны здесь.

Пример

• Вкладка
• Вкладка
• Вкладка

• Приветик!
• Какое счастье!
• Удивительно!

<!-- Это контейнер переключающих элементов -->
<ul data-uk-switcher="{connect:'#switcher-id'}">
    <li class="uk-active"><a href="">...</a></li>
    <li><a href="">...</a></li>
</ul>

<!-- Это контейнер из элементов контента -->
<ul id="switcher-id" class="uk-switcher">
    <li class="uk-active">...</li>
    <li>...</li>
</ul>

Переключение содержимого/контента с активного пункта на любой другой пункт

В некоторых случаях бывает необходимо переключиться на другой раздел/секцию из активного пункта контента. Это возможно сделать с помощью атрибута data-uk-switcher-item. Чтобы установить цель элемента, необходимо установить для data-* атрибута номер соответствующего элемента контента.

Пример

<!-- Это навигация, содержащая переключающие элементы -->
<ul data-uk-switcher="{connect:'#switcher-id'}">
    <li><a href="">...</a></li>
</ul>

<!-- Это контейнер элементов содержимого -->
<ul id="switcher-id" class="uk-switcher">
    <li> ... <a href="" data-uk-switcher-item="0">...</a></li>
    <li> ... <a href="" data-uk-switcher-item="1">...</a></li>
</ul>

<li> ... <a href="" data-uk-switcher-item="next">...</a></li>
<li> ... <a href="" data-uk-switcher-item="previous">...</a></li>

Переключение сразу нескольких разделов/блоков

Также возможно связать несколько разделов контента. Просто расширьте параметр connect с помощью идентификатора (ID) дополнительного контейнера.

Пример

Пример 2

<!-- Это навигация, содержащая переключающие элементы -->
<ul data-uk-switcher="{connect:'#my-id-one, #my-id-two'}">
    <li><a href="">...</a></li>
</ul>

<!-- Это контейнеры элементов контента -->
<ul id="my-id-one" class="uk-switcher">
    <li>...</li>
</ul>

<ul id="my-id-two" class="uk-switcher">
    <li>...</li>
</ul>

Анимации

Компонент Switcher позволяет добавлять различные анимации к элементам при переключении между ними. Все, что вам нужно сделать, это добавить параметр animation в data-* атрибут и указать анимацию, которую вы хотите использовать. Ознакомьтесь с доступными вариантами анимаций в таблице ниже.

Примеры

<!-- Это контейнер переключающих элементов -->
<ul data-uk-switcher="{connect:'#my-id', animation: 'fade'}">
    <li><a href="">...</a></li>
</ul>

<!-- Это контейнер содержащихся элементов -->
<ul id="my-id" class="uk-switcher">
    <li>...</li>
</ul>

Пользовательские анимации

Вы также можете применять несколько анимаций с помощью классов uk-animation-* из компонента Animation. Таким образом, вы даже можете создать свой собственный пользовательский класс для переходов switcher'-а.

Пример

• Вкладка
• Вкладка
• Вкладка

• Приветик!
• Какое счастье!
• Великолепно!

<!-- Это контейнер переключающих элементов -->
<ul data-uk-switcher="{connect:'#switcher-id', animation: 'uk-animation-fade, uk-animation-slide-left'}">
    <li><a href="">...</a></li>
</ul>

<!-- Это контейнер содержащихся элементов -->
<ul id="switcher-id" class="uk-switcher">
    <li>...</li>
</ul>

Switcher и Subnav

Переключатель switcher можно использовать вместе с компонентом Subnav.

Пример

• Пункт
• Пункт
• Пункт

• Приветик!
• Какое счастье!
• Великолепно!

<!-- Это subnav, содержащий переключающие элементы -->
<ul class="uk-subnav uk-subnav-pill" data-uk-switcher="{connect:'#my-id'}">
    <li><a href="">...</a></li>
</ul>

<!-- Это контейнер содержащихся элементов -->
<ul id="my-id" class="uk-switcher">
    <li>...</li>
</ul>

Switcher и Tab

В качестве исключения из правила добавьте атрибут data-uk-tab="{connect:'#ID'}", используя параметр «tab» вместо «switcher», к навигации с вкладками, чтобы объединить переключатель switcher с Tab.

Пример

<!-- Это вкладка навигации, содержащая переключаемые элементы -->
<ul class="uk-tab" data-uk-tab="{connect:'#my-id'}">
    <li><a href="">...</a></li>
</ul>

<!-- Это контейнер содержащихся элементов -->
<ul id="my-id" class="uk-switcher uk-margin">
    <li>...</li>
</ul>

Вертикальные вкладки

Используйте компонент Grid для корректного отображения контента с вертикальной навигацией по вкладкам/табам.

Пример

Пример

<!-- Это левая вертикальная вкладка навигации -->
<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <!-- Это вертикальная навигация с вкладками, содержащая переключаемые элементы -->
        <ul class="uk-tab uk-tab-left" data-uk-tab="{connect:'#my-id'}">...</ul>
    </div>
    <div class="uk-width-medium-1-2">
        <!-- Это контейнер содержащихся элементов -->
        <ul id="my-id" class="uk-switcher">...</ul>
    </div>
</div>

<!-- Это правильная вертикальная навигация с вкладками -->
<div class="uk-grid">
    <div class="uk-width-medium-1-2 uk-push-1-2">
        <!-- Это вертикальная навигация с вкладками, содержащая переключаемые элементы -->
        <ul class="uk-tab uk-tab-right" data-uk-tab="{connect:'#my-id'}">...</ul>
    </div>
    <div class="uk-width-medium-1-2 uk-pull-1-2">
        <!-- Это контейнер содержащихся элементов -->
        <ul id="my-id" class="uk-switcher">...</ul>
    </div>
</div>

Switcher и Button

Переключатель switcher также может быть применен к кнопкам или группам кнопок из компонента Button. Просто добавьте data-* атрибут к элементу <div> вокруг группы кнопок или к элементу с классом .button-group.

Пример

<!-- Это контейнер переключающих кнопок -->
<div data-uk-switcher="{connect:'#my-id'}">
    <button class="uk-button" type="button">...</button>
</div>

<!-- Это контейнер содержащихся элементов -->
<ul id="my-id" class="uk-switcher uk-margin">...</ul>

<!-- Это группа кнопок, содержащая кнопки переключения -->
<div class="uk-button-group" data-uk-switcher="{connect:'#my-id'}">
    <button class="uk-button" type="button">...</button>
</div>

<!-- Это контейнер содержащихся элементов -->
<ul id="my-id" class="uk-switcher uk-margin">...</ul>

Switcher и Nav

Чтобы применить переключатель switcher к компоненту Nav, добавьте data-* атрибут к <ul> элементу навигации. Используйте компонент Grid для расположения навигации и содержимого в макете грида ^*сетки.

Пример

<div class="uk-grid">
    <div class="uk-width-medium-1-4">

        <!-- Это навигация, содержащая переключающие элементы -->
        <ul class="uk-nav uk-nav-side" data-uk-switcher="{connect:'#my-id'}">
            <li><a href="">...</a></li>
        </ul>
    </div>
    <div class="uk-width-medium-3-4">

        <!-- Это контейнер содержащихся элементов -->
        <ul id="my-id" class="uk-switcher">
            <li>...</li>
        </ul>
    </div>
</div>

JavaScript options

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

data-uk-switcher="{active:1}"

Events

Вы можете привязать обратные вызовы ^*callbacks к следующим событиям для пользовательской функциональности:

Пример

$('[data-uk-switcher]').on('show.uk.switcher', function(event, area){
    console.log("Switcher switched to ", area);
});