Компонент Вкладка 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>
  • <ul class="uk-tab-bottom" uk-tab>
        <li class="uk-active"><a href="#">Активная</a></li>
        <li><a href="#">Вкладка</a></li>
        <li><a href="#">Вкладка</a></li>
    </ul>

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

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

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

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

<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

Кликабельные вкладки можно использовать вместе с выпадающим меню из компонента Раскрывающийся список :: 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="/v3">UIkit 3</a></li>
                </ul>
            </div>
        </li>
    </ul>

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

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

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

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

JavaScript

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

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

UIkit.tab(element, options);

События

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

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

Методы

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

Show

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

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

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

Доступность

Компонент «Tab» соответствует 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 или spacekeys. Чтобы переключиться на автоматическую активацию, установите для follow-focus значение true. При навигации по элементам вкладки соответствующий элемент содержимого становится активным автоматически.