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

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

Switcher: Руководство

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

Как правило, переключатели оформляются с помощью других компонентов, некоторые из которых будут показаны здесь.

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

<!-- Это контейнер из элементов содержимого -->
<div class="uk-switcher">
    <div>...</div>
    <div>...</div>
</div>
В этих примерах используется компонент Суб-навигация.
Отлично! Хорошего настроения!
Приветик!
Вот и хорошо!
<ul class="uk-subnav uk-subnav-pill" uk-switcher>
    <li><a href="#">Пункт</a></li>
    <li><a href="#">Вкладка</a></li>
    <li><a href="#">Элемент</a></li>
</ul>

<div class="uk-switcher uk-margin">
    <div>Отлично! Хорошего настроения!</div>
    <div>Приветик!</div>
    <div>Вот и хорошо!</div>
</div>

Если вам необходимо, чтобы элемент с классом .uk-switcher был вложен в другой элемент, например, при использовании grid-сетки, добавьте в атрибут uk-switcher опцию connect: SELECTOR и выберите элемент, содержащий элементы для переключения.

Теща копошится у велосипеда, зять вопросительно:
Мама, а куда вы собрались?
На кладбище.
Нормально, а кто велосипед назад прикатит?!
<ul class="uk-subnav uk-subnav-pill uk-flex-center" uk-switcher="connect: #switcher-id">
    <li><a href="#">Начало</a></li>
    <li><a href="#">Вопрос</a></li>
    <li><a href="#">Ответ</a></li>
    <li><a href="#">Озадачен</a></li>
</ul>

<div class="uk-margin uk-child-width-expand uk-text-center" uk-grid>
    <div>
        <div id="switcher-id" class="uk-switcher uk-margin">
            <div>Теща копошится у велосипеда, зять вопросительно:</div>
            <div>Мама, а куда вы собрались?</div>
            <div>На кладбище.</div>
            <div>Нормально, а кто велосипед назад прикатит?!</div>
        </div>
    </div>
</div>

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

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

<div class="uk-switcher uk-margin">
    <div><a href="#" uk-switcher-item="0"></a></div>
    <div><a href="#" uk-switcher-item="1"></a></div>
    <div><a href="#" uk-switcher-item="next"></a></div>
    <div><a href="#" uk-switcher-item="previous"></a></div>
</div>
Сказка просто! Следующая вкладка
<ul class="uk-subnav uk-subnav-pill" uk-switcher>
    <li><a href="#">Вкладка</a></li>
    <li><a href="#">Вкладка</a></li>
    <li><a href="#">Вкладка</a></li>
</ul>

<div class="uk-switcher uk-margin">
    <div>Привет! <a href="#" uk-switcher-item="2">Переключиться на вкладу 3</a></div>
    <div>Сказка просто! <a href="#" uk-switcher-item="next">Следующая вкладка</a></div>
    <div>Сработало! <a href="#" uk-switcher-item="previous">Предыдущая вкладка</a></div>
</div>

Подключение нескольких контейнеров

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

<!-- Это навигация, содержащая переключающие элементы -->
<ul uk-switcher="connect: .my-class">...</ul>

<!-- Это контейнеры с контентом -->
<div class="uk-switcher my-class">...</div>

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

Контейнер 1

Вот и я!
Опять привет!
Радость-то какая!

Контейнер 2

Приветик! Первый пункт.
И снова открытая вкладка! Второй пункт.
Ура! Третий пункт открыт.
<ul class="uk-subnav uk-subnav-pill" uk-switcher="connect: .switcher-container">
    <li><a href="#">Активная</a></li>
    <li><a href="#">Вкладка</a></li>
    <li><a href="#">Вкладка</a></li>
</ul>

<h3>Контейнер 1</h3>
<div class="uk-switcher switcher-container uk-margin">
    <div>Вот и я!</div>
    <div>Опять привет!</div>
    <div>Радость-то какая!</div>
</div>

<h3>Контейнер 2</h3>
<div class="uk-switcher switcher-container uk-margin">
    <div>Приветик! Первый пункт.</div>
    <div>И снова открытая вкладка! Второй пункт.</div>
    <div>Ура! Третий пункт открыт.</div>
</div>

Анимация

Добавление анимации

Вы можете добавить анимацию к элементам переключателя Switcher. Разрешается использовать любую анимациию из компонента Анимация. Для этого добавьте к атрибуту uk-switcher параметр animation с соответствующим классом. 

<ul uk-switcher="animation: uk-animation-fade">...</ul>
Видимая вкладка!
Опять я тут!
Классная анимашка!
<ul class="uk-subnav uk-subnav-pill" uk-switcher="animation: uk-animation-slide-right-medium">
    <li><a href="#">Вкладка</a></li>
    <li><a href="#">Вкладка</a></li>
    <li><a href="#">Вкладка</a></li>
</ul>

<div class="uk-switcher uk-margin">
    <div>Видимая вкладка!</div>
    <div>Опять я тут!</div>
    <div>Классная анимашка!</div>
</div>

Несколько анимаций

При необходимости, вы также можете применить несколько анимаций из компонента Анимация. Таким образом, вы можете создать свой собственный пользовательский класс для переходов. 

<ul uk-switcher="animation: uk-animation-fade, uk-animation-slide-right-medium">...</ul>
Пятикилометровая пробежка!
Продлевает жизнь на полчаса!
Но занимает 40 минут!
<ul class="uk-subnav uk-subnav-pill" uk-switcher="animation: uk-animation-fade, uk-animation-slide-right-medium">
    <li><a href="#">Вкладка</a></li>
    <li><a href="#">Вкладка</a></li>
    <li><a href="#">Вкладка</a></li>
</ul>

<div class="uk-switcher uk-margin">
    <div>Пятикилометровая пробежка!</div>
    <div>Продлевает жизнь на полчаса!</div>
    <div>Но занимает 40 минут!</div>
</div>

Switcher и Subnav

Переключатель контента и Суб-навигация

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

Суб-навигация определяет стили и отлично подходит для переключателя Switcher.

<!-- Это суб-навигация, содержащая переключающие элементы -->
<ul class="uk-subnav uk-subnav-pill" uk-switcher>...</ul>

<!-- Это контейнер для элементов с контентом -->
<div class="uk-switcher"></div>
Мартынка выпросил телегу с лошадью и поехал в город. Едет он мимо мясных лавок — шум, брань, толпа народу. Что такое? А то мясники изловили охотничью собаку...
В некотором царстве, в некотором государстве жил да был старик со старухой и был у них сын Мартынка.
Всю жизнь свою занимался старик охотой, бил зверя и птицу, тем и сам кормился, и семью кормил. Пришло время..
<ul class="uk-subnav uk-subnav-pill" uk-switcher>
    <li><a href="#">Пункт</a></li>
    <li><a href="#">Пункт</a></li>
    <li><a href="#">Пункт</a></li>
</ul>

<div class="uk-switcher uk-margin">
    <div>Мартынка выпросил телегу с лошадью и поехал в город. Едет он мимо мясных лавок — шум, брань, толпа народу. Что такое? А то мясники изловили охотничью собаку...</div>
    <div>В некотором царстве, в некотором государстве жил да был старик со старухой и был у них сын Мартынка.</div>
    <div>Всю жизнь свою занимался старик охотой, бил зверя и птицу, тем и сам кормился, и семью кормил. Пришло время..</div>
</div>

Switcher и Tab

Переключатель контента и вкладка Таб

В качестве исключения из правила добавьте к вкладкам навигации атрибут uk-tab вместо uk-switcher, чтобы объединить переключатель контента с компонентом Отзывчивые вкладки : Tab. 

<!-- Это суб-навигация, содержащая переключающие элементы -->
<ul uk-tab>...</ul>

<!-- Это контейнер содержаший элементы с контентом -->
<div class="uk-switcher">...</div>
Жили-были старик да старуха, у них была дочка Алёнушка да сынок Иванушка. Пошла Аленушка на работу и братца с собой взяла.
Пошла Аленушка на работу и братца с собой взяла. Идут они по дальнему пути, по широкому полю, и захотелось Иванушке пить.
Шли-шли — солнце высоко, колодец далеко, жар донимает, пот выступает. Стоит коровье копытце полно водицы.
<ul uk-tab>
    <li><a href="#">Вкладка</a></li>
    <li><a href="#">Вкладка</a></li>
    <li><a href="#">Вкладка</a></li>
</ul>

<div class="uk-switcher uk-margin">
    <div>Жили-были старик да старуха, у них была дочка Алёнушка да сынок Иванушка. Пошла Аленушка на работу и братца с собой взяла.</div>
    <div>Пошла Аленушка на работу и братца с собой взяла. Идут они по дальнему пути, по широкому полю, и захотелось Иванушке пить.</div>
    <div>Шли-шли — солнце высоко, колодец далеко, жар донимает, пот выступает. Стоит коровье копытце полно водицы.</div>
</div>

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

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

<div uk-grid>
    <div class="uk-width-auto">
        <ul class="uk-tab-left" uk-tab="connect: #my-id">...</ul>
    </div>
    <div class="uk-width-expand">
        <div id="my-id" class="uk-switcher">...</div>
    </div>
</div>
Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь сердцем.
Приехал Мартынка в город, стал ходить по улицам да присматриваться, и попался ему на глаза мальчишка.
Ни одного штриха не мог бы я сделать, а никогда не был таким большим художником, как в эти минуты с фреймворком UIkit 3.
Не стал долго раздумывать, полез за пазуху, вытащил деньги и отдал мальчику, а кота посадил в мешок и повез домой.
Ни одного штриха не мог бы я сделать, согласился и без устали три лета и три зимы на попа работал. Пришел срок к расплате.
Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь сердцем.
<div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <div uk-grid>
            <div class="uk-width-auto@m">
                <ul class="uk-tab-left" uk-tab="connect: #component-tab-left; animation: uk-animation-fade">
                    <li><a href="#">Активная</a></li>
                    <li><a href="#">Вкладка</a></li>
                    <li><a href="#">Вкладка</a></li>
                </ul>
            </div>
            <div class="uk-width-expand@m">
                <div id="component-tab-left" class="uk-switcher">
                    <div>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь сердцем.</div>
                    <div>Приехал Мартынка в город, стал ходить по улицам да присматриваться, и попался ему на глаза мальчишка.</div>
                    <div>Ни одного штриха не мог бы я сделать, а никогда не был таким большим художником, как в эти минуты с фреймворком UIkit 3.</div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div uk-grid>
            <div class="uk-width-auto@m uk-flex-last@m">
                <ul class="uk-tab-right" uk-tab="connect: #component-tab-right; animation: uk-animation-fade">
                    <li><a href="#">Активная</a></li>
                    <li><a href="#">Вкладка</a></li>
                    <li><a href="#">Вкладка</a></li>
                </ul>
            </div>
            <div class="uk-width-expand@m">
                <div id="component-tab-right" class="uk-switcher">
                    <div>Не стал долго раздумывать, полез за пазуху, вытащил деньги и отдал мальчику, а кота посадил в мешок и повез домой.</div>
                    <div>Ни одного штриха не мог бы я сделать, согласился и без устали три лета и три зимы на попа работал. Пришел срок к расплате.</div>
                    <div>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь сердцем.</div>
                </div>
            </div>
        </div>
    </div>
</div>

Как подключить несколько контейнеров с контентом для переключения.

Switcher и Button

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

Switcher также может быть применен к кнопкам или группам кнопок из компонента Button. Просто добавьте к блоку вокруг группы кнопок атрибут переключателя, или к элементу с классом .uk-button-group. 

<!-- Это переключатель, использующий несколько кнопок -->
<div uk-switcher="toggle: > *">
    <button class="uk-button uk-button-default" type="button"></button>
    <button class="uk-button uk-button-default" type="button"></button>
</div>

<div class="uk-switcher">...</div>
Близко ли, поблагодарил царя, взял кольцо да малую толику денег на дорогу и пустился обратно тем же путем, каким прежде шел.
Король тем же часом собрал к себе всех господ министров, и начали они судить да рядить, какой бы ответ дать этой старухе.
С таким-то ответом отпустили старуху. Идет она домой — шатается, горючими слезами заливается. Бросились они по разным местам...
<div uk-switcher="animation: uk-animation-fade; toggle: > *">
    <button class="uk-button uk-button-default" type="button">Элемент</button>
    <button class="uk-button uk-button-default" type="button">Кнопка</button>
    <button class="uk-button uk-button-default" type="button">Нажималка</button>
</div>

<div class="uk-switcher uk-margin">
    <div>Близко ли, поблагодарил царя, взял кольцо да малую толику денег на дорогу и пустился обратно тем же путем, каким прежде шел.</div>
    <div>Король тем же часом собрал к себе всех господ министров, и начали они судить да рядить, какой бы ответ дать этой старухе.</div>
    <div>С таким-то ответом отпустили старуху. Идет она домой — шатается, горючими слезами заливается. Бросились они по разным местам...</div>
</div>

Примечание Поскольку в этом примере кнопки не завёрнуты в список элементов, интерактивные элементы, которые запускают переключение содержимого, должны быть изменены с помощью опции toggle.

Switcher и Nav

Переключатель контента и Навигация списком

Чтобы применить переключатель контента к компоненту Навигация списком :: Nav добавьте к элементу навигации <ul> атрибут uk-switcher.

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

<div uk-grid>
    <div class="uk-width-small">
        <ul class="uk-nav uk-nav-default" uk-switcher="connect: #my-id">...</ul>
    </div>
    <div class="uk-width-expand">
        <div id="my-id" class="uk-switcher">...</div>
    </div>
</div>
Посеял старик пшеницу, и выросла пшеница богатая, да повадился ту пшеницу кто-то по ночам толочь и травить. Вот старик и говорит детям...
Приходит первая ночь. Отправился старший сын пшеницу стеречь, да захотелось ему спать: забрался он на сеновал и проспал до утра. Приходит утром домой.
В самую полночь прискакал в пшеницу разношерстный конь: одна шерстинка золотая, другая — серебряная, бежит — земля дрожит, из ушей дым столбом валит, из ноздрей пламя пышет.
<div uk-grid>
    <div class="uk-width-small@m">
        <ul class="uk-nav uk-nav-default" uk-switcher="connect: #component-nav; animation: uk-animation-fade">
            <li><a href="#">Активный</a></li>
            <li><a href="#">Элемент</a></li>
            <li><a href="#">Навигация</a></li>
        </ul>
    </div>
    <div class="uk-width-expand@m">
        <div id="component-nav" class="uk-switcher">
            <div>Посеял старик пшеницу, и выросла пшеница богатая, да повадился ту пшеницу кто-то по ночам толочь и травить. Вот старик и говорит детям...</div>
            <div>Приходит первая ночь. Отправился старший сын пшеницу стеречь, да захотелось ему спать: забрался он на сеновал и проспал до утра. Приходит утром домой.</div>
            <div>В самую полночь прискакал в пшеницу разношерстный конь: одна шерстинка золотая, другая — серебряная, бежит — земля дрожит, из ушей дым столбом валит, из ноздрей пламя пышет.</div>
        </div>
    </div>
</div>

Параметры для атрибута

При использовании компонента Switcher к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

Опции компонента

Опция Значение По умолчанию Описание
connect CSS selector ~.uk-switcher Связанные элементы контейнера. По умолчанию последующие элементы с классом 'uk-switcher'.
toggle CSS selector > * > :first-child Выберите интерактивные (кликабельные) элементы, которые запускают переключение контента.
itemNav CSS selector false Связанный контейнер навигации. По умолчанию элементы навигации находятся только в контейнере связанных элементов.
active Number 0 Активный индекс инициализации.
animation String false Название анимации для использования. Разделяйте несколько вариантов запятой.
duration Number 200 Продолжительность анимации.
swiping Boolean true Использовать "swiping" (смахивание).

connect является Primary опцией. Если connect это единственный параметр в значении атрибута, то её ключ можно не использовать. 

<span uk-switcher=".switcher-container"></span>

JavaScript

Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.

Инициализация

UIkit.switcher(element, options);

События

Следующие события будут инициированы для элементов компонента «Switcher»:

Имя события Описание
beforeshow Срабатывает до отображения элемента. Может предотвратить отображение, вернув false.
show Срабатывает после отображения элемента.
shown Запускается после завершения анимации показанного элемента.
beforehide Срабатывает до скрытия элемента. Может предотвратить скрытие, вернув false.
hide Срабатывает после запуска анимации скрытия элемента.
hidden Срабатывает после того, как элемент спрятан.

Методы

Для компонента «Switcher» доступны следующие методы:

Show

UIkit.switcher(element).show(index);

Показывает элемент Switcher с заданным индексом.

Название Тип По умолчанию Описание
index String, Number, Node 0 Элемент Switcher для отображения. Индекс начинается с 0.

Доступность

Компонент «Switcher» соответствует Tabs Pattern и автоматически устанавливает соответствующие роли, состояния и свойства WAI-ARIA.

  • Навигация-переключатель (переключатель контента, навигационный переключатель) имеет роль tablist, и если это компонент Nav, то aria-orientation состояние устанавливается как vertical.
  • Переключаемые элементы навигации имеют роль presentation.
  • Переключаемые навигационные ссылки имеют идентификатор (ID), роль tab, состояние aria-selected и свойство aria-controls, установленное на идентификатор соответствующего элемента содержимого.
  • Список содержимого (контента) имеет роль presentation.
  • Элементы списка содержимого имеют идентификатор, роль tabpanel и свойство aria-labelledby, установленные на идентификатор соответствующего переключаемого элемента.

Взаимодействие с клавиатурой

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

  • Клавиши tab или shift+tab помещают фокус на активный переключатель в навигации по переключателям. Если фокус уже находится на активном переключателе, фокус переместится на следующий элемент за пределами текущей переключающей навигации.
  • Клавиши left/right arrow или up/down arrow в зависимости от ориентации, позволяют перемещаться по переключателям. Если фокус находится на последнем переключателе, он перемещается на первый переключатель.
  • Клавиши enter или space активируют соответствующий элемент содержимого сфокусированного переключателя.
  • Клавиши home или end перемещают фокус на первый или последний переключатель.

По умолчанию компонент Switcher активируется вручную. Это означает, что соответствующие элементы контента будут активированы только с помощью клавиш enter или space. Чтобы переключиться на автоматическую активацию, установите для follow-focus значение true. При навигации по переключаемым элементам соответствующий элемент контента становится активным автоматически.