> For the complete documentation index, see [llms.txt](https://v2-0-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://v2-0-0.pipui.ru/components/tabs.md).

# Вкладки

## Общая информация <a href="#general-information" id="general-information"></a>

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

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

    <div class="tab-list">
        <div class="tab-id active" data-tabs-id="example-tab-1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam aut consectetur dicta ea eligendi esse
        </div>
        
        <div class="tab-id" data-tabs-id="example-tab-2">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </div>
        
        <div class="tab-id" data-tabs-id="example-tab-3">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, voluptate?
        </div>
    </div>
</div>
```

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

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

## Горизонтальные вкладки <a href="#horizontal-tabs" id="horizontal-tabs"></a>

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

## Javascript

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

```javascript
PipUI.Tabs.active(document.getElementById('example-tab-1'));
// Или
TabsComponent.active(document.getElementById('example-tab-1'));
```

{% hint style="info" %}
Свойство PipUI.Tabs является ссылкой на объект TabsComponent
{% endhint %}

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

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

    <div class="tab-list bg-gray-200">
        <div class="tab-id active" data-tabs-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="PipUI.toggleClass(document.querySelector('.tabs'), 'tabs-horizontal');">Переключить расположение</button>
            </div>
        </div>
        <div class="tab-id" data-tabs-id="example-tab-8">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </div>
        <div class="tab-id" data-tabs-id="example-tab-9">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, voluptate?
        </div>
    </div>
</div>
```

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

### Опции <a href="#default-settings" id="default-settings"></a>

```javascript
PipUI.Tabs.debug = false; // Вывод дебага в консоль браузера
```

### Методы <a href="#animation-control" id="animation-control"></a>

```javascript
PipUI.Tabs.active(element); // Активировать вкладку
// Параметр element является элементом вкладки
```

### События

| Триггер         | Описание                         | Инициатор |
| --------------- | -------------------------------- | --------- |
| hide-tabs-pipui | Срабатывает при закрытии вкладки | .tab-id   |
| show-tabs-pipui | Срабатывает при открытии         | .tab-id   |