Вкладка

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

Использование

На вкладке компонент состоит из кликабельные вкладки, которые располагаются рядом друг с другом.

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

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

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

Пример

Разметки

<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`	Добавить этот класс, чтобы выровнять вкладки правой и в обратном порядке.
`.uk-tab-bottom`	Добавить этот класс в `<ul>`, чтобы поместить вкладки внизу. Это может также быть объединено с другими модификаторами.

Пример

Разметки

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

Оправдать вкладок

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

Пример

Разметки

<ul class="uk-tab uk-tab-grid uk-tab-bottom" data-uk-tab>
    <li class="uk-width-1-3"><a href="">...</a></li>
</ul>

Центр вкладок

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

Пример

Разметки

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

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

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

Пример

Разметки

<ul class="uk-tab uk-tab-left uk-width-medium-1-2">
    <li>...</li>
</ul>

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

Адаптивный поведение

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

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

Это пример того, как использовать вкладки с Выпадающий компонент.

Пример

Активный
Пункт
Пункт
Больше
- Пункт
- Еще один пункт
- Заголовок
- Пункт
- Еще один пункт
- Отделенный элемент

Разметки

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

    <!-- This is the container enabling the JavaScript -->
    <li data-uk-dropdown="{mode:'click'}">

        <!-- This is the menu item toggling the dropdown -->
        <a href="">...</a>

        <!-- This is the dropdown -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">...</a></li>
            </ul>
        </div>
    </li>
</ul>

События

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

Название	Параметры	Описание
`change.uk.tab`	event, active item, previous item	На вкладке пункт изменить