Табы – это заголовки и соответствующие им блоки. Как правило, по умолчанию открыт только один блок, другие скрыты. При нажатии на заголовок отображается соответствующий блок.
Основные возможности
- Использование множества блоков с табами
- Открытие нужного таба по хэшу
- Превращение табов в спойлеры на указанной ширине экрана (удобно для адаптива)
- Возможность анимированного открытия табов
- Семантика
Расположение компонента
Файлы компонента находятся в папке src/components/layout/tabs, здесь вы найдете JS-файл компонента, HTML-файл с примером кода, а также файл SCSS для стилизации компонента.
Использование компонента
В нужном месте вызвать снипет tabs (классы можно заменить нужными). Или вручную создать структуру с соответствующими дата-атрибутами. Обратите внимание, что добавление класса —tab-active для заголовка таба сделает таб активным (открытым)
Пример блока с тремя табами:
<div data-fls-tabs class="tabs"><nav data-fls-tabs-titles class="tabs__navigation"><button type="button" class="tabs__title --tab-active">Таб №1</button><button type="button" class="tabs__ton" class="tabs__title">Таб №3</button></nav><div data-fls-tabs-body class="tabs__content"><div class="tabs__body">Содержимое первого таба</div><div class="tabs__body">Содержимое второго таба</div><div class="tabs__Превращение табов в спойлеры
Для того, чтобы преобразовываться в спойлеры, необходимо для элемента с атрибутом data-fls-tabs указать значение ширины экрана ниже которой произойдет преобразование:
<div data-fls-tabs="768" class="tabs"> ... </div>В момент преобразования к объекту с атрибутом data-tabs добавится класс —tab-spolle r, которым можно изменить стили для нового представления табов-спойлеров.
Открытие нужного таба по хэшу
Если необходимо открывать конкретный таб в конкретном блоке табов при открытии страницы по хэшу, необходимо для элемента с атрибутом data-fls-tabs добавить атрибут data-fls-tabs-hash :
<div data-fls-tabs data-fls-tabs-hash class="tabs"> ... </div>Теперь, при нажатии на заголовки табов, в адрес страницы будет добавляться хеш вида: #tab-0-1, где 0 – это идентификатор блока с табами, а 1 – идентификатор таба в этом блоке.
Соответственно, перейдя на страницу с хешем #tab-0-1, откроется второй таб в первом блоке с табами. При #tab-2-0 откроется первый таб в третьем блоке с табами и так далее.
Анимация при открытии таба
Для того чтобы табы открывались плавно, необходимо объекту с атрибутом data-fls-tabs , добавить атрибут data-fls-tabs-animate , а в качестве значения указать количество миллисекунд, за которые откроется таб (по умолчанию 500).
<div data-fls-tabs data-fls-tabs-animate="1000" class="tabs"> ... </div>