Композитные вкладки

Композитные вкладки позволяют изменять отображение табов в зависимости от их состояния. Вы можете отдельно задавать содержимое и стили отображения для активной и не активной вкладки.

Структура вкладок

Вкладки состоят из двух областей - системы навигации и области контента. Система навигации построена по принципу подмены данных. Для каждой вкладки есть два слоя: слой неактивной вкладки и слой активной вкладки.

Контент 1
Контент 2
Контент 3 
<div class="sf-tab">
  <nav class="sf-tab-nav">
    <ul class="sf-tab-nav-wrap">
      <li class="active">
        <div class="sf-tab-inactive"><a href="#">Вкладка 1 (неактивная)<a></div>
        <div class="sf-tab-active">Вкладка 1 (активная)</div>
      </li>
      <li>
        <div class="sf-tab-inactive"><a href="#">Вкладка 2 (неактивная)<a></div>
        <div class="sf-tab-active">Вкладка 2 (активная)</div>
      </li>
      <li>
        <div class="sf-tab-inactive"><a href="#">Вкладка 3 (неактивная)<a></div>
        <div class="sf-tab-active">Вкладка 3 (активная)</div>
      </li>
    </ul>
  </nav>
  <div class="sf-tab-content">
    <section class="sf-tab-content-wrap active">
      Контент 1
    </section>
    <section class="sf-tab-content-wrap">
      Контент 2
    </section>
    <section class="sf-tab-content-wrap">
      Контент 3
    </section>
  </div>
</div>

Модификация вкладок

Структура вкладок построена на базе флексбокс. Вы можете использовать flexbox модификаторы для изменения порядка вывода или выравнивания вкладок.

Для изменения внешнего вида, вы можете использовать различные модификаторы (цвет, фон, границы и т.д.), что позволит вам создать необходимый стиль отображения вкладок

1
2
3 
<div class="sf-tab">
  <nav class="sf-tab-nav">
    <ul class="sf-tab-nav-wrap justify-content-center bg-gray-50">
      <li class="active">
        <div class="sf-tab-inactive py-2 px-4 b-1 bg-white b-red br-0"><a href="#" class="l-red">Вкладка 1 (неактивная)<a></div>
        <div class="sf-tab-active py-2 px-4 b-1 b-red bg-red c-white"><i class="fa fa-home fa-fw mr-2" aria-hidden="true"></i>Вкладка 1 (активная)</div>
      </li>
      <li>
        <div class="sf-tab-inactive py-2 px-4 b-1 bg-white b-red br-0"><a href="#" class="l-red">Вкладка 2 (неактивная)<a></div>
        <div class="sf-tab-active py-2 px-4 b-1 b-red bg-red c-white">Вкладка 2 (активная)</div>
      </li>
      <li>
        <div class="sf-tab-inactive py-2 px-4 b-1 bg-white b-red"><a href="#" class="l-red">Вкладка 3 (неактивная)<a></div>
        <div class="sf-tab-active py-2 px-4 b-1 b-red bg-red c-white">Вкладка 3 (активная)</div>
      </li>
    </ul>
  </nav>
  <div class="sf-tab-content b-4 b-grey-50 bt-0 p-3 t-center t-7 c-gray">
    <section class="sf-tab-content-wrap active">
      1
    </section>
    <section class="sf-tab-content-wrap">
      2
    </section>
    <section class="sf-tab-content-wrap">
      3
    </section>
  </div>
</div>