Вкладки

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

Tab #3

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.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, voluptate?

HTML

<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, который сделает вкладки и их содержимое горизонтальными

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, voluptate?

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

Javascript

pipui.tabs.active('#example-tab-2')

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, voluptate?

HTML

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