Skip to content

Модуль для работы с табами

Табы являются хорошим способом организации больших массивов тескстов, данных, группируя их по вкладкам определенной тематик.

Разметка

Данный модуль предоставляет набор стилей и классов.

Ключевым является соблюдение разметки, при которой все блоки с контентом (блоки с классом .tab-block) и переключатели (кнопки с классом .tab-toggle), упаковываются в контейнер с классом .tab.

<div class="tab">
  <button class="tab-toggle" data-target="#tab-1" data-toggle="tabs">
      Таб 1
  </button>

  <div id="tab-1" class="tab-block">
    <div class="tab-block-inner">
      Текст в первой вкладке
    </div>
  </div>

  <button class="tab-toggle" data-target="#tab-2" data-toggle="tabs">
    Таб 2
  </button>

  <div id="tab-2" class="tab-block">
    <div class="tab-block-inner">
      Текст второй вкладки
    </div>
  </div>
</div>

Info

Для связи "переключатель"-"вкладка", в значении data-target перелючателя надо указать id вкладки

Классы

На переключатель в процессе работы вешаются следующие классы:

  • is-closed - вкладка находится в закрытом состоянии
  • is-opened - вкладка находится в открытом состоянии
  • is-active - вкладка активна