# Вкладки

## Общая информация <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   |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://v2-0-0.pipui.ru/components/tabs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.