Компонент Переключатель контента Switcher
Динамический переход по различным областям контента. Управление навигацией. Подключение нескольких контейнеров. Переключатель контента и анимация.
Руководство
Руководство по использованию Switcher
Компонент Переключатель контента состоит из нескольких переключателей и связанных с ними элементов содержимого / контента. Добавьте атрибут uk-switcher
в элемент списка, который содержит переключатели. Добавьте класс .uk-switcher
к элементу, который содержит элементы контента для отображения.
Как правило, переключатели оформляются с помощью других компонентов, некоторые из которых будут показаны здесь.
<!-- Это навигация, содержащая переключающие элементы -->
<ul uk-switcher>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<!-- Это контейнер из элементов содержимого -->
<ul class="uk-switcher">
<li>...</li>
<li>...</li>
</ul>
Если вам необходимо, чтобы элемент с классом .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> <ul id="switcher-id" class="uk-switcher uk-margin"> <li>Теща копошится у велосипеда, зять вопросительно:</li> <li>Мама, а куда вы собрались?</li> <li>На кладбище.</li> <li>Нормально, а кто велосипед назад прикатит?!</li> </ul> </div> </div>
Управление навигацией
В некоторых случаях бывает необходимость переключаться из активного контента на какой-то другой раздел с контентом.
Это возможно с помощью атрибута uk-switcher-item
.
Чтобы установить цели на элементы, необходимо установить для атрибута номер соответствующего элемента контента.
Установка атрибутов next
и previous
переключит на соседние элементы.
<ul class="uk-switcher uk-margin">
<li><a href="#" uk-switcher-item="0"></a></li>
<li><a href="#" uk-switcher-item="1"></a></li>
<li><a href="#" uk-switcher-item="next"></a></li>
<li><a href="#" uk-switcher-item="previous"></a></li>
</ul>
-
- Привет! Переключиться на вкладу 3
- Сказка просто! Следующая вкладка
- Сработало! Предыдущая вкладка
-
<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> <ul class="uk-switcher uk-margin"> <li>Привет! <a href="#" uk-switcher-item="2">Переключиться на вкладу 3</a></li> <li>Сказка просто! <a href="#" uk-switcher-item="next">Следующая вкладка</a></li> <li>Сработало! <a href="#" uk-switcher-item="previous">Предыдущая вкладка</a></li> </ul>
Подключение нескольких контейнеров
Также возможно подключить несколько контейнеров с контентом.
Просто добавьте к атрибуту uk-switcher
параметр connect
и используйте селектор,
который применяется ко всем элементам.
<!-- Это навигация, содержащая переключающие элементы -->
<ul uk-switcher="connect: .my-class">...</ul>
<!-- Это контейнеры с контентом -->
<ul class="uk-switcher my-class">...</ul>
<ul class="uk-switcher my-class">...</ul>
-
Контейнер 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> <h4>Контейнер 1</h4> <ul class="uk-switcher switcher-container uk-margin"> <li>Вот и я!</li> <li>Опять привет!</li> <li>Радость-то какая!</li> </ul> <h4>Контейнер 2</h4> <ul class="uk-switcher switcher-container uk-margin"> <li>Приветик! Первый пункт.</li> <li>И снова открытая вкладка! Второй пункт.</li> <li>Ура! Третий пункт открыт.</li> </ul>
Анимация
Добавление анимации
Вы можете добавить анимацию к элементам переключателя 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> <ul class="uk-switcher uk-margin"> <li>Видимая вкладка!</li> <li>Опять я тут!</li> <li>Классная анимашка!</li> </ul>
Несколько анимаций
При необходимости, вы также можете применить несколько анимаций из компонента Анимация. Таким образом, вы можете создать свой собственный пользовательский класс для переходов.
<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> <ul class="uk-switcher uk-margin"> <li>Пятикилометровая пробежка!</li> <li>Продлевает жизнь на полчаса!</li> <li>Но занимает 40 минут!</li> </ul>
Switcher и Subnav
Переключатель контента и Суб-навигация
Переключатель контента можно использовать совместно с компонентом Subnav.
Суб-навигация определяет стили и отлично подходит для переключателя Switcher.
<!-- Это суб-навигация, содержащая переключающие элементы -->
<ul class="uk-subnav uk-subnav-pill" uk-switcher>...</ul>
<!-- Это контейнер для элементов с контентом -->
<ul class="uk-switcher"></ul>
-
- Мартынка выпросил телегу с лошадью и поехал в город. Едет он мимо мясных лавок — шум, брань, толпа народу. Что такое? А то мясники изловили охотничью собаку...
- В некотором царстве, в некотором государстве жил да был старик со старухой и был у них сын Мартынка.
- Всю жизнь свою занимался старик охотой, бил зверя и птицу, тем и сам кормился, и семью кормил. Пришло время..
-
<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> <ul class="uk-switcher uk-margin"> <li>Мартынка выпросил телегу с лошадью и поехал в город. Едет он мимо мясных лавок — шум, брань, толпа народу. Что такое? А то мясники изловили охотничью собаку...</li> <li>В некотором царстве, в некотором государстве жил да был старик со старухой и был у них сын Мартынка.</li> <li>Всю жизнь свою занимался старик охотой, бил зверя и птицу, тем и сам кормился, и семью кормил. Пришло время..</li> </ul>
Switcher и Tab
Переключатель контента и вкладка Таб
В качестве исключения из правила добавьте к вкладкам навигации атрибут uk-tab
вместо uk-switcher
,
чтобы объединить переключатель контента с компонентом Отзывчивые вкладки : Tab.
<!-- Это суб-навигация, содержащая переключающие элементы -->
<ul uk-tab>...</ul>
<!-- Это контейнер содержаший элементы с контентом -->
<ul class="uk-switcher">...</ul>
-
- Жили-были старик да старуха, у них была дочка Алёнушка да сынок Иванушка. Пошла Аленушка на работу и братца с собой взяла.
- Пошла Аленушка на работу и братца с собой взяла. Идут они по дальнему пути, по широкому полю, и захотелось Иванушке пить.
- Шли-шли — солнце высоко, колодец далеко, жар донимает, пот выступает. Стоит коровье копытце полно водицы.
-
<ul uk-tab> <li><a href="#">Вкладка</a></li> <li><a href="#">Вкладка</a></li> <li><a href="#">Вкладка</a></li> </ul> <ul class="uk-switcher uk-margin"> <li>Жили-были старик да старуха, у них была дочка Алёнушка да сынок Иванушка. Пошла Аленушка на работу и братца с собой взяла.</li> <li>Пошла Аленушка на работу и братца с собой взяла. Идут они по дальнему пути, по широкому полю, и захотелось Иванушке пить.</li> <li>Шли-шли — солнце высоко, колодец далеко, жар донимает, пот выступает. Стоит коровье копытце полно водицы.</li> </ul>
Вертикальные вкладки
Используйте компоненты 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">
<ul id="my-id" class="uk-switcher">...</ul>
</div>
</div>
-
-
<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"> <ul id="component-tab-left" class="uk-switcher"> <li>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь сердцем.</li> <li>Приехал Мартынка в город, стал ходить по улицам да присматриваться, и попался ему на глаза мальчишка.</li> <li>Ни одного штриха не мог бы я сделать, а никогда не был таким большим художником, как в эти минуты с фреймворком UIkit 3.</li> </ul> </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"> <ul id="component-tab-right" class="uk-switcher"> <li>Не стал долго раздумывать, полез за пазуху, вытащил деньги и отдал мальчику, а кота посадил в мешок и повез домой.</li> <li>Ни одного штриха не мог бы я сделать, согласился и без устали три лета и три зимы на попа работал. Пришел срок к расплате.</li> <li>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь сердцем.</li> </ul> </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>
<ul class="uk-switcher">...</ul>
-
- Близко ли, поблагодарил царя, взял кольцо да малую толику денег на дорогу и пустился обратно тем же путем, каким прежде шел.
- Король тем же часом собрал к себе всех господ министров, и начали они судить да рядить, какой бы ответ дать этой старухе.
- С таким-то ответом отпустили старуху. Идет она домой — шатается, горючими слезами заливается. Бросились они по разным местам...
-
<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> <ul class="uk-switcher uk-margin"> <li>Близко ли, поблагодарил царя, взял кольцо да малую толику денег на дорогу и пустился обратно тем же путем, каким прежде шел.</li> <li>Король тем же часом собрал к себе всех господ министров, и начали они судить да рядить, какой бы ответ дать этой старухе.</li> <li>С таким-то ответом отпустили старуху. Идет она домой — шатается, горючими слезами заливается. Бросились они по разным местам...</li> </ul>
toggle
.
Switcher и Nav
Переключатель контента и Навигация списком
Чтобы применить переключатель контента к компоненту Навигация списком :: Nav добавьте к элементу навигации <ul>
атрибут uk-switcher
.
<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">
<ul id="my-id" class="uk-switcher">...</ul>
</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"> <ul id="component-nav" class="uk-switcher"> <li>Посеял старик пшеницу, и выросла пшеница богатая, да повадился ту пшеницу кто-то по ночам толочь и травить. Вот старик и говорит детям...</li> <li>Приходит первая ночь. Отправился старший сын пшеницу стеречь, да захотелось ему спать: забрался он на сеновал и проспал до утра. Приходит утром домой.</li> <li>В самую полночь прискакал в пшеницу разношерстный конь: одна шерстинка золотая, другая — серебряная, бежит — земля дрожит, из ушей дым столбом валит, из ноздрей пламя пышет.</li> </ul> </div> </div>
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
.
При навигации по переключаемым элементам соответствующий элемент контента становится активным автоматически.