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

Переключатель. Динамический переход по различным областям содержимого.

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

Компонент 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>
Заметка Установка атрибута next и previous переключает на соседние элементы.

Разметка

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

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

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

Пример

Заголовок раздела 1

  • Привет из блока 1!

    Далеко-далеко за словесными горами в стране...

  • Вау! Переключились на блок 1.

    Эта парадигматическая страна, в которой...

  • Невероятно, но факт: блок 1.

    Далеко-далеко за словесными горами в стране...

Заголовок раздела 2

  • Привет из блока 2!

    Далеко-далеко за словесными горами в стране...

  • Вау! Переключились на блок 2.

    Далеко-далеко за словесными горами в стране...

  • Невероятно, но факт: блок 2.

    Эта парадигматическая страна, в которой...

Пример 2

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

    Пункт А, Раздел 1

  • Пункт Б, Раздел 1

    Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу.
  • Пункт В, Раздел 1

    Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу.
  • Пункт А, Раздел 2

    Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу.
  • Переключатель

    Пункт Б, Раздел 2

  • Пункт В, Раздел 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-* атрибут и указать анимацию, которую вы хотите использовать. Ознакомьтесь с доступными вариантами анимаций в таблице ниже.

Класс Описание
fade Эффект плавного появления/исчезновения.
scale Анимация элемента - эффект «scale-up».
slide-top Переход элемента с эффектом скольжения сверху.
slide-bottom Переход элемента с эффектом скольжения снизу.
slide-left Переход элемента с эффектом скольжения слева.
slide-right Переход элемента с эффектом скольжения справа.
slide-horizontal Элементы скользят горизонтально, направление зависит от соседнего.
slide-vertical Элементы скользят вертикально, направление зависит от соседнего.

Примеры

Fade
  • Приветик!
  • Какое счастье!
  • Превосходно!
Scale
  • Приветик!
  • Какое счастье!
  • Превосходно!
Slide top
  • Приветик!
  • Какое счастье!
  • Превосходно!
Slide bottom
  • Приветик!
  • Какое счастье!
  • Превосходно!
Slide left
  • Приветик!
  • Какое счастье!
  • Превосходно!
Slide right
  • Приветик!
  • Какое счастье!
  • Превосходно!
Slide horizontal
  • Приветик!
  • Какое счастье!
  • Превосходно!
Slide vertical
  • Приветик!
  • Какое счастье!
  • Великолепно!

Разметка

<!-- Это контейнер переключающих элементов -->
<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>
Примечание При использовании горизонтального модификатора .uk-tab-bottom навигация и содержимое должны быть расположены в реверсивном *обратном порядке, чтобы содержимое отображалось над вкладками.

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

Используйте компонент 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}"
Option Possible value Default Description
connect CSS selector false Related items container
toggle CSS selector '> *' Toggle css selector, triggering content switching on click
active integer 0 Active index on init
animation mixed false Predefined animation name or any uk-animation class name.
swiping boolean true Enable/disable content change on swipe

Events

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

Name Parameter Description
show.uk.switcher event, active item On switcher item show/change

Пример

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