Вкладки позволяют разделять контент на разделы и переключаться по ним, как с помощью прямого обращения, так и через javascript. PipUI позволяет с легкостью реализовать данный подход, используя всего несколько строчек кода
<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>
Контейнером для вкладок выступает блок .tabs, который в себе имеет 2 других контейнера ul.tab-links и .tab-list для вкладок и их содержимого соответственно.
Элемент с классом .tab-link внутри блока ul.tab-links > li выступает в качестве триггера, который должен иметь в себе отсылку к содержимому вкладки, через атрибут data-id
Совместно с классом .tabs, Вы можете использовать класс .tabs-horizontal, который сделает вкладки и их содержимое горизонтальными.
Помимо HTML, Вы можете менять активность вкладок через javascript метод pipui.tabs.active, принимающий 1 входящий параметр id, который является элементом содержимого вкладки. Данный метод возвращает true или false в зависимости от того, была ли переключена вкладка или нет.
pipui.tabs.active('#example-tab-2')
Кроме всего прочего, Вы можете манипулировать цветами панели вкладок и их содержимым, их отступами и др., используя другие компоненты фреймворка.
<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>