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

Динамично переход через различные области Контента.

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

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

Пример

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

• Здравствуйте!
• И снова здравствуйте!
• Бугагашки!

Разметки

<!-- This is the container of the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id'}">
    <li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
    <li>...</li>
</ul>

Переключатель товары за содержание

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

Пример

Разметки

<!-- This is the nav containing the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id'}">
    <li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-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>

Установка атрибута next и previous переключится на смежных элементов.

Разметки

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

Соедините несколько элементов

Также возможно подключение нескольких содержимого контейнеров. Просто продлить connect параметр с идентификатором дополнительный контейнер.

Пример

Разметки

<!-- This is the nav containing the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id-one, #my-id-two'}">
    <li><a href="">...</a></li>
</ul>

<!-- These are the containers of the content items -->
<ul id="my-id-one" class="uk-switcher">
    <li>...</li>
</ul>

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

Анимации

Коммутатор компонент позволяет Вам добавлять различные элементы анимации при переключении между ними. Все, что вам нужно сделать, это добавить animation параметр в Data-атрибут и выбрать анимацию, которую требуется применить. Проверьте в таблице ниже представлены анимации обеспечены.

Пример

Разметки

<!-- This is the container of the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id', animation: 'fade'}">
    <li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
    <li>...</li>
</ul>

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

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

Пример

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

• Здравствуйте!
• И снова здравствуйте!
• Бугагашки!

Разметки

<!-- This is the container of the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id', animation: 'uk-animation-fade, uk-animation-slide-left'}">
    <li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
    <li>...</li>
</ul>

Переключатель с subnav

Коммутатор легко наносится на Subnav компонент.

Пример

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

• Здравствуйте!
• И снова здравствуйте!
• Бугагашки!

Разметки

<!-- This is the subnav containing the toggling elements -->
<ul class="uk-subnav uk-subnav-pill" data-uk-switcher="{connect:'#my-id'}">
    <li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
    <li>...</li>
</ul>

Переключатель с вкладками

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

Пример

Разметки

<!-- This is the tabbed navigation containing the toggling elements -->
<ul class="uk-tab" data-uk-tab="{connect:'#my-id'}">
    <li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher uk-margin">
    <li>...</li>
</ul>

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

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

Используйте Грид компонент, чтобы отобразить содержимое правильно с вертикальной навигации с вкладками.

Пример

Пример

<!-- This is the left vertical tabbed navigation -->
<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <!-- This is the vertical tabbed navigation containing the toggling elements -->
        <ul class="uk-tab uk-tab-left" data-uk-tab="{connect:'#my-id'}">...</ul>
    </div>
    <div class="uk-width-medium-1-2">
        <!-- This is the container of the content items -->
        <ul id="my-id" class="uk-switcher">...</ul>
    </div>
</div>

<!-- This is the right vertical tabbed navigation -->
<div class="uk-grid">
    <div class="uk-width-medium-1-2 uk-push-1-2">
        <!-- This is the vertical tabbed navigation containing the toggling elements -->
        <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">
        <!-- This is the container of the content items -->
        <ul id="my-id" class="uk-switcher">...</ul>
    </div>
</div>

Переключатель с кнопками

Коммутатор может также применяться для кнопки или группы кнопок от Компонент Button. Просто добавить коммутатор данных атрибута <div> элемент вокруг группу кнопок или элементов с .button-group класс.

Пример

Разметки

<!-- This is the container of the toggling buttons -->
<div data-uk-switcher="{connect:'#my-id'}">
    <button class="uk-button" type="button">...</button>
</div>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher uk-margin">...</ul>

<!-- This is the button group containing the toggling buttons -->
<div class="uk-button-group" data-uk-switcher="{connect:'#my-id'}">
    <button class="uk-button" type="button">...</button>
</div>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher uk-margin">...</ul>

Переключатель с nav

Чтобы применить переключатель на Сча компонент добавьте атрибут Data нав <ul>. Используйте Грид компонент чтобы организовать NAV и содержание в грид разметка.

Пример

Разметки

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

        <!-- This is the nav containing the toggling elements -->
        <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">

        <!-- This is the container of the content items -->
        <ul id="my-id" class="uk-switcher">
            <li>...</li>
        </ul>
    </div>
</div>

JavaScript варианты

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

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

События

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

Пример

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