PipUI v2.0.0
  • 🌟Введиние
  • 🗃️Скачать
  • ⚠️Начало работы
  • Компоненты
    • Базовый набор
    • Отступы
    • Палитра цветов
    • Grid сетка
    • Панель навигации
    • Выпадающее меню
    • Постраничная навигация
    • Формы
    • Кнопки
    • Полосы прогресса
    • Меню навигации
    • Модальные окна
    • Оповещения
    • Подтверждения действий
    • BB-коды
    • Всплывающие подсказки
    • Вкладки
    • Хлебные крошки
    • Спойлеры
    • Галерея
    • Изображения
    • Таблицы
    • Панель BB-кодов
    • Валидаторы форм
    • Всплывающие блоки
    • Слайдер
    • Автозаполнение
    • Селектор тегов
    • Селекторы даты и времени
    • Блоки оповещений
    • Якоря
  • 📧Контакты
  • 🔁GitHub
Powered by GitBook
On this page
  • Общая информация
  • Горизонтальные вкладки
  • Javascript
  • Опции
  • Методы
  • События
  1. Компоненты

Вкладки

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

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

PreviousВсплывающие подсказкиNextХлебные крошки

Last updated 2 years ago

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