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

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

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

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

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

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

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

<!-- Это контейнер элементов содержимого -->
<ul class="uk-switcher">
    <li></li>
</ul>

В этом примере мы используем оформление из компонента Субнавигация.

    • Привет!
    • Привет еще раз!
    • Bazinga!
  • <ul class="uk-subnav uk-subnav-pill" uk-switcher>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<ul class="uk-switcher uk-margin">
    <li>Hello!</li>
    <li>Hello again!</li>
    <li>Bazinga!</li>
</ul>

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

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

<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>

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

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

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

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

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

  • Контейнер 1

    • Привет!
    • Привет еще раз!
    • Bazinga!

    Контейнер 2

    • Это первый элемент.
    • Это второй элемент.
    • Это третий элемент.
  • <ul class="uk-subnav uk-subnav-pill" uk-switcher="connect: .switcher-container">
    <li><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<h4>Container 1</h4>

<ul class="uk-switcher switcher-container uk-margin">
    <li>Hello!</li>
    <li>Hello again!</li>
    <li>Bazinga!</li>
</ul>

<h4>Container 2</h4>

<ul class="uk-switcher switcher-container uk-margin">
    <li>Hello! The first item.</li>
    <li>Hello again! The second item.</li>
    <li>Bazinga! The third item.</li>
</ul>

Анимации

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

<ul uk-switcher="animation: uk-animation-fade">...</ul>
    • Привет!
    • Привет еще раз!
    • Bazinga!
  • <ul class="uk-subnav uk-subnav-pill" uk-switcher="animation: uk-animation-fade">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<ul class="uk-switcher uk-margin">
    <li>Hello!</li>
    <li>Hello again!</li>
    <li>Bazinga!</li>
</ul>

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

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

<ul uk-switcher="animation: uk-animation-slide-left-medium, uk-animation-slide-right-medium">...</ul>
    • Привет!
    • Еще раз привет!
    • Bazinga!
  • <ul class="uk-subnav uk-subnav-pill" uk-switcher="animation: uk-animation-slide-left-medium, uk-animation-slide-right-medium">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<ul class="uk-switcher uk-margin">
    <li>Hello!</li>
    <li>Hello again!</li>
    <li>Bazinga!</li>
</ul>

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

Переключатель легко использовать с компонентом Субнавигация.

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

<!-- Это контейнер для переключения -->
<ul class="uk-switcher"></ul>
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.
  • <ul class="uk-subnav uk-subnav-pill" uk-switcher>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<ul class="uk-switcher uk-margin">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
</ul>

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

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

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

<!-- Это контейнер для переключения -->
<ul class="uk-switcher">...</ul>
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.
  • <ul uk-tab>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<ul class="uk-switcher uk-margin">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
</ul>

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

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

<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>
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.
  • <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="#">Active</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                </ul>
            </div>
            <div class="uk-width-expand@m">
                <ul id="component-tab-left" class="uk-switcher">
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
                    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
                    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</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="#">Active</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                </ul>
            </div>
            <div class="uk-width-expand@m">
                <ul id="component-tab-right" class="uk-switcher">
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
                    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
                    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
                </ul>
            </div>
        </div>
    </div>
</div>

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

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

<!-- Это переключатель, использующий несколько кнопок -->
<div uk-switcher>
    <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>
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.
  • <div uk-switcher="animation: uk-animation-fade; toggle: > *">
    <button class="uk-button uk-button-default" type="button">Item</button>
    <button class="uk-button uk-button-default" type="button">Item</button>
    <button class="uk-button uk-button-default" type="button">Item</button>
</div>

<ul class="uk-switcher uk-margin">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
</ul>

Переключатель и навигация

Чтобы применить переключатель к компоненту Навигация, добавьте атрибут uk-switcher к элементу <ul>. Используйте Сетку и Ширину для организации навигации и содержимого в сетке

<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>
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.
  • <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; toggle: > :not(.uk-nav-header)">
            <li><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>

    </div>
    <div class="uk-width-expand@m">

        <ul id="component-nav" class="uk-switcher">
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
            <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
        </ul>

    </div>
</div>

Все опции компонента

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

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

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

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

JavaScript

Подробнее о компонентах JavaScript.

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

UIkit.switcher(element, options);

События

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

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

Методы

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

Show

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

Показывает элемент Переключателя с заданным индексом.

Имя Тип По умолчанию Описание
index String, Integer, Node 0 Индекс активного элемента. Основан на 0 индексе.