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

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

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>
В этих примерах используется компонент Суб-навигация.
    • Отлично! Хорошего настроения!
    • Приветик!
    • Вот и хорошо!
  • <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>

Если вам необходимо, чтобы элемент с классом .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>

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

Также возможно подключить несколько контейнеров с контентом. Просто добавьте к атрибуту 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">
        <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">
        <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>

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

Переключатель контента можно использовать совместно с компонентом 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>

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

В качестве исключения из правила добавьте к вкладкам навигации атрибут 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>
    • Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь сердцем.
    • Приехал Мартынка в город, стал ходить по улицам да присматриваться, и попался ему на глаза мальчишка.
    • Ни одного штриха не мог бы я сделать, а никогда не был таким большим художником, как в эти минуты с фреймворком 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">
                    <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>

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


Переключатель контента и кнопка : 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.

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

Чтобы применить переключатель контента к компоненту Навигация списком : 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">
        <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>

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

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

Опция Значение По умолчанию Описание
connect CSS selector ~.uk-switcher Связанные элементы контейнера. По умолчанию последующие элементы с классом 'uk-switcher'.
toggle CSS selector > * > :first-child Выберите интерактивные (кликабельные) элементы, которые запускают переключение контента.
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);

События

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

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

Методы

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

Show

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

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

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