Вкладки

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

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