Вкладки

Создавайте навигационные вкладки с различной стилизацией.

Как использовать вкладки

Компонент состоит из интерактивных вкладок, которые выровнены в один ряд. Функциональность поддерживается компонентом Переключатель, который осуществляет динамические переходы по различному содержимому с помощью навигации по вкладкам.

Класс/Атрибут Описание
uk-tab Добавьте этот атрибут к элементу <ul> для начала работы с компонентом. Используйте элементы <a> внутри элементов <li> вкладок.
.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>

Модификатор нижнего положения

Добавьте класс .uk-tab-bottom для переворачивания вкладок вниз.

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

  • <ul class="uk-tab-bottom" uk-tab>
    <li class="uk-active"><a href="#">Left</a></li>
    <li><a href="#">Вкладка</a></li>
    <li><a href="#">Вкладка</a></li>
</ul>

Модификаторы положения влево и вправо

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

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

<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="#">Слева</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="#">Справа</a></li>
            <li><a href="#">Вкладка</a></li>
            <li><a href="#">Вкладка</a></li>
        </ul>
    </div>
</div>

Адаптивность

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

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

Выравнивание

Вы можете комбинировать компонент Вкладки с компонентом Flex и компонентом Ширина для применения различных вариантов выравнивания.

<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="#">По центру</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="#">Справа</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="#">По ширине</a></li>
        <li><a href="#">Вкладка</a></li>
        <li><a href="#">Вкладка</a></li>
        <li><a href="#">Вкладка</a></li>
    </ul>
</div>

Вкладки и выпадающие списки

Вкладки могут быть использованы для вызова выпадающего меню из компонента Dropdown.

<ul uk-tab>
    <li>

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

        <!-- Это выпадающий список -->
        <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">Заголовок</li>
                <li><a href="#">Вкладка</a></li>
                <li><a href="#">Вкладка</a></li>
                <li class="uk-nav-divider"></li>
                <li><a href="#">Вкладка</a></li>
            </ul>
        </div>
    </li>
</ul>

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

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

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

JavaScript

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

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

UIkit.tab(element, options);

События

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

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

Методы

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

Show

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

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

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