Компонент позволяют разделять контент на вкладки и переключаться по ним, как с помощью прямого обращения, так и через 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 является элементом вкладки
