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

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

Применение

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

Класс Описание
.uk-tab Добавьте этот класс к элементу <ul>, чтобы применить компонент Tab.
Используйте в списке в качестве элемента вкладки тег <a>.
.uk-active Добавьте этот класс в элемент списка, чтобы применить активное состояние.
.uk-disabled Добавьте этот класс в элемент списка, чтобы применить отключенное состояние.

Атрибут data-uk-tab

Использование атрибута data-uk-tab требуется для двух целей. Во-первых, это позволяет использовать адаптивное поведение. Если родительский контейнер слишком мал для размещения всех вкладок, они будут объединены в раскрывающийся список, переключаемый одной вкладкой, которая будет отображаться как активный элемент вкладки.

Примечание Для работы необходим компонент Dropdown.

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

Пример

Разметка

<ul class="uk-tab" data-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 href="">Выключено</a></li>
</ul>

Горизонтальные модификаторы

Добавьте один из следующих классов, чтобы изменить стиль ваших вкладок. Эти модификаторы также можно комбинировать.

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

Класс Описание
.uk-tab-flip Добавьте этот класс к элементу <ul>, чтобы разместить вкладки по правой стороне в обратном порядке.
.uk-tab-bottom Добавьте этот класс к элементу <ul>, чтобы разместить вкладки понизу.
Можно сочетать с другими модификаторами.

Пример (табы по правому краю, реверсивное расположение)

Разметка

<ul class="uk-tab uk-tab-flip" data-uk-tab>
    <li class="uk-active"><a href="">Активная</a></li>
    <li><a href="">Вкладка</a></li>
    ...
</ul>

Пример (табы по нижнему краю)

Разметка

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

Justify tabs

Добавьте класс .uk-tab-grid и один из классов .uk-width-* из компонента Grid к элементам списка, чтобы расположить вкладки в grid-сетке, занимающей всю ширину его родительского элемента.

Пример

Разметка

<ul class="uk-tab uk-tab-grid uk-tab-bottom" data-uk-tab>
    <li class="uk-width-1-3 uk-active"><a href="">Активная</a></li>
    <li class="uk-width-1-3"><a href="">Вкладка</a></li>
    ...
</ul>

Выравнивание вкладок по центру

Добавьте класс .uk-tab-center к элементу <div> обхватив навигацинный список вкладок, чтобы центрировать вкладки.

Пример

Разметка

<div class="uk-tab-center">
    <ul class="uk-tab" data-uk-tab>
        ...
    </ul>
</div>

Заметка Если вы используете нижний модификатор UIkit 2 на вкладках, также добавьте класс .uk-tab-center-bottom к окружающему элементу <div>, чтобы отрегулировать границу.

Пример

Разметка

<div class="uk-tab-center uk-tab-center-bottom">
    <ul class="uk-tab uk-tab-bottom" data-uk-tab>
        <li class="uk-active"><a href="">Активная</a></li>
        <li><a href="">Вкладка</a></li>
        ...
    </ul>
</div>

Вертикальные модификаторы

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

Пример

Разметка

<ul class="uk-tab uk-tab-left uk-width-medium-7-10">
    <li>...</li>
</ul>

Пример

Разметка

<ul class="uk-tab uk-tab-right uk-width-medium-2-3">
    <li>...</li>
</ul>

Отзывчивое поведение

В более узких окнах просмотра, таких как телефоны, вертикальные вкладки располагаются горизонтально. Добавление атрибута data-uk-tab приведет к такому же отзывчивому поведению, как и в случае с горизонтальными вкладками.

Вкладки с Dropdown

Это пример того, как использовать вкладки с компонентом Dropdown.

Пример

Разметка

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

    <!-- Это контейнер, включающий JavaScript -->
    <li data-uk-dropdown="{mode:'click'}">

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

        <!-- Это Dropdown -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">...</a></li>
            </ul>
        </div>
    </li>
</ul>

События

Вы можете привязать обратные вызовы callbacks к следующим событиям для пользовательской функциональности:

Name Parameters Description
change.uk.tab event, active item, previous item On tab item change