Вкладки

Общая информация

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

<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>

Пример работы кода выше

Элемент с классом .tab-link и атрибутом data-tabs-id яаляется триггером переключения вкладки через javascript. Чтобы javascript не обрабатывал такие вкладки, достаточно убрать атрибут data-tabs-id.

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

Совместно с классом .tabs, Вы можете использовать класс .tabs-horizontal, который сделает вкладки и их содержимое горизонтальными.

Javascript

Помимо HTML, Вы можете менять активность вкладок через javascript метод PipUI.Tabs.active, принимающий 1 входящий параметр element, который является элементом содержимого вкладки. Данный метод возвращает true или false в зависимости от того, была ли переключена вкладка или нет.

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

Свойство PipUI.Tabs является ссылкой на объект TabsComponent

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

<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>

Пример работы кода выше

Опции

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

Методы

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

События

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