Компонент Вкладка

Tab: Применение

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

<ul uk-tab>
    <li class="uk-active"><a href=""></a></li>
    <li><a href=""></a></li>
    <li class="uk-disabled"><a></a></li>
</ul>

• Результат
• Разметка

• Активная
• Вкладка
• Вкладка
• Отключено

<ul uk-tab>
    <li class="uk-active"><a href="#">Активная</a></li>
    <li><a href="#">Вкладка</a></li>
    <li><a href="#">Вкладка</a></li>
    <li class="uk-disabled"><a>Отключено</a></li>
</ul>

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

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

• Результат
• Разметка

• Right
• Вкладка
• Вкладка

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

• Результат
• Разметка

• Center
• Вкладка
• Вкладка

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

• Результат
• Разметка

• Justify
• Вкладка
• Вкладка
• Вкладка

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

Вкладки и 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>

• Результат
• Разметка

• Активный
• Пункт
• Выпадающий
  • Активный пункт
  • Пункт меню
  • Заголовок UIkit 3
  • Пункт меню
  • Ещё один пункт
  • UIkit 3

<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 к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

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

JavaScript

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

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

UIkit.tab(element, options);

События

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

Методы

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

Show

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

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

Доступность

Компонент «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. При навигации по элементам вкладки соответствующий элемент содержимого становится активным автоматически.