Компонент Отзывчивые вкладки

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

Tab. Применение

Компонент Отзывчивые вкладки состоит из адаптивных интерактивных вкладок которые размещенных рядом друг с другом. Его функциональные возможности расширяет компонент Switcher; необходим для динамического перехода через различное содержимое с помощью навигации по вкладкам.

Класс/Атрибут Описание
uk-tab Добавьте этот атрибут к элементу <ul> , чтобы определить компонент Tab. Используйте элемент <a> в качестве элемента вкладки в списке.
.uk-active Добавьте этот класс в элемент списка, чтобы применить активное состояние.
.uk-disabled Добавьте этот класс в элемент списка, чтобы применить отключенное состояние. Также удалите атрибут href, чтобы сделать его недоступным с помощью навигации по клавиатуре.
<ul uk-tab>
    <li class="uk-active"><a href=""></a></li>
    <li><a href=""></a></li>
    <li class="uk-disabled"><a></a></li>
</ul>

Модификатор «Bottom»

Добавьте класс .uk-tab-bottom, чтобы установить таб-элементы снизу.

<ul class="uk-tab-bottom" uk-tab>...</ul>

Модификаторы «Left» и «Right»

Добавьте класс .uk-tab-left или .uk-tab-right для выравнивания вкладок по вертикали слева или справа.

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

При использовании вертикального выравнивания вы обычно создадите grid-сетку для своего макета, как показано в примере Switcher example.

<ul class="uk-tab-left" uk-tab>...</ul>

<ul class="uk-tab-right" uk-tab>...</ul>
  • <div class="uk-child-width-1-2@s" uk-grid>
        <div>
            <ul class="uk-tab-left" uk-tab>
                <li class="uk-active"><a href="#">Left</a></li>
                <li><a href="#">Вкладка</a></li>
                <li><a href="#">Вкладка</a></li>
            </ul>
        </div>
        <div>
            <ul class="uk-tab-right" uk-tab>
                <li class="uk-active"><a href="#">Right</a></li>
                <li><a href="#">Вкладка</a></li>
                <li><a href="#">Вкладка</a></li>
            </ul>
        </div>
    </div>

Отзывчивость

Чтобы изменить точку останова по умолчанию между вертикальным и горизонтальным выравниванием, используйте с атрибутом опцию media с соответствующей шириной области просмотра. Добавьте число в пикселях, например media: 640, или точку останова, например media: @m.

<ul class="uk-tab-left" uk-tab="media: @s">...</ul>

Выравнивание вкладок

Вы можете комбинировать вкладки с компонентом Flex или Width, чтобы определить выравнивание навигации.

<ul class="uk-flex-right" uk-tab>...</ul>
  • <div class="uk-margin-medium-top">
        <ul class="uk-flex-center" uk-tab>
            <li class="uk-active"><a href="#">Center</a></li>
            <li><a href="#">Вкладка</a></li>
            <li><a href="#">Вкладка</a></li>
        </ul>
    </div>
    <div>
        <ul class="uk-flex-right" uk-tab>
            <li class="uk-active"><a href="#">Right</a></li>
            <li><a href="#">Вкладка</a></li>
            <li><a href="#">Вкладка</a></li>
        </ul>
    </div>
    <div>
        <ul class="uk-child-width-expand" uk-tab>
            <li class="uk-active"><a href="#">Justify</a></li>
            <li><a href="#">Вкладка</a></li>
            <li><a href="#">Вкладка</a></li>
            <li><a href="#">Вкладка</a></li>
        </ul>
    </div>

Отзывчивые вкладки и Dropdown

Кликабельные вкладки можно использовать вместе с выпадающим меню из компонента Раскрывающийся список : Dropdown.

<ul uk-tab>
    <li>
        <!-- Это пункт меню, переключающий выпадающий список dropdown -->
        <a href=""></a>

        <!-- Это выпадающий список dropdown -->
        <div uk-dropdown="mode: click">
            <ul class="uk-nav uk-dropdown-nav">...</ul>
        </div>
    </li>
</ul>
  • <ul uk-tab>
        <li class="uk-active"><a href="#">Активный</a></li>
        <li><a href="#">Пункт</a></li>
        <li>
            <a href="#">Выпадающий <span class="uk-margin-small-left" uk-icon="icon: triangle-down"></span></a>
            <div uk-dropdown="mode: click">
                <ul class="uk-nav uk-dropdown-nav">
                    <li class="uk-active"><a href="#">Активный пункт</a></li>
                    <li><a href="#">Пункт меню</a></li>
                    <li class="uk-nav-header">Заголовок UIkit 3</li>
                    <li><a href="#">Пункт меню</a></li>
                    <li><a href="#">Ещё один пункт</a></li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="#">Отдельный пункт UIkit 3</a></li>
                </ul>
            </div>
        </li>
    </ul>

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

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

Опция Значение По умолчанию Описание
connect CSS selector false Связанные элементы контейнера. По умолчанию последующие элементы с классом 'uk-switcher'.
toggle CSS selector > * Селектор переключателя, который запускает переключение контента по клику.
active Number 0 Активный индекс инициализации.
animation String false Название анимации для использования. Несколько вариантов разделяйте запятой.
duration Number 200 Продолжительность анимации.
swiping Boolean true Использовать смахивание (swiping).
media Integer, String 960 Когда переключаться в горизонтальный режим - ширина в виде целого числа (например, 640) или точка останова (например, @s, @m, @l, @xl) или любой допустимый медиа-запрос (например, (min-width: 900px)).

JavaScript

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

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

UIkit.tab(element, options);

События

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

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

Методы

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

Show

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

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

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