> For the complete documentation index, see [llms.txt](https://v1-6-0.pipui.ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://v1-6-0.pipui.ru/components/tabs.md).

# Вкладки

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

```html
<div class="tabs">
    <ul class="tab-links">
        <li><a href="#" data-id="#example-tab-1" class="tab-link active">Tab #1</a></li>
        <li><a href="#" data-id="#example-tab-2" class="tab-link">Tab #2</a></li>
        <li><a href="#" data-id="#example-tab-3" class="tab-link">Tab #3</a></li>
    </ul>

    <div class="tab-list">
        <div class="tab-id active" id="example-tab-1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam aut consectetur dicta ea eligendi esse, magnam minima, odio perferendis quia saepe totam vitae. Eius facere magnam omnis provident vero.
        </div>
        
        <div class="tab-id" id="example-tab-2">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </div>
        
        <div class="tab-id" id="example-tab-3">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, voluptate?
        </div>
    </div>
</div>
```

{% embed url="<https://codepen.io/pipui/pen/ExpZmmo>" %}
Пример работы кода выше
{% endembed %}

Контейнером для вкладок выступает блок <mark style="color:orange;">`.tabs`</mark>, который в себе имеет 2 других контейнера <mark style="color:orange;">`ul.tab-links`</mark> и <mark style="color:orange;">`.tab-list`</mark> для вкладок и их содержимого соответственно.

Элемент с классом <mark style="color:orange;">`.tab-link`</mark> внутри блока <mark style="color:orange;">`ul.tab-links > li`</mark> выступает в качестве триггера, который должен иметь в себе отсылку к содержимому вкладки, через атрибут <mark style="color:orange;">`data-id`</mark>

Совместно с классом <mark style="color:orange;">`.tabs`</mark>, Вы можете использовать класс <mark style="color:orange;">`.tabs-horizontal`</mark>, который сделает вкладки и их содержимое горизонтальными.

Помимо HTML, Вы можете менять активность вкладок через javascript метод <mark style="color:orange;">`pipui.tabs.active`</mark>, принимающий 1 входящий параметр **id**, который является элементом содержимого вкладки. Данный метод возвращает true или false в зависимости от того, была ли переключена вкладка или нет.

```javascript
pipui.tabs.active('#example-tab-2')
```

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

```html
<div class="tabs tabs-horizontal">
    <ul class="tab-links bg-light-green-i">
        <li><a href="#" data-id="#example-tab-7" class="tab-link active">Tab #1</a></li>
        <li><a href="#" data-id="#example-tab-8" class="tab-link">Tab #2</a></li>
        <li><a href="#" data-id="#example-tab-9" class="tab-link">Tab #3</a></li>
    </ul>

    <div class="tab-list bg-gray-200">
        <div class="tab-id active" id="example-tab-7">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam aut consectetur dicta ea eligendi esse, magnam minima, odio perferendis quia saepe totam vitae. Eius facere magnam omnis provident vero.
            <div class="text-center pt-20">
                <button class="btn" onclick="$(this).closest('.tabs').toggleClass('tabs-horizontal')">Переключить расположение</button>
            </div>
        </div>
        <div class="tab-id" id="example-tab-8">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </div>
        <div class="tab-id" id="example-tab-9">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, voluptate?
        </div>
    </div>
</div>
```

{% embed url="<https://codepen.io/pipui/pen/mdjRmwg>" %}
Пример работы кода выше
{% endembed %}