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

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

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

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

Content 1
Content 2
Content 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="#">Tab 1 (inactive)<a></div>
<div class="sf-tab-active">Tab 1 (active)</div>
</li>
<li>
<div class="sf-tab-inactive"><a href="#">Tab 2 (inactive)<a></div>
<div class="sf-tab-active">Tab 2 (active)</div>
</li>
<li>
<div class="sf-tab-inactive"><a href="#">Tab 3 (inactive)<a></div>
<div class="sf-tab-active">Tab 3 (active)</div>
</li>
</ul>
</nav>
<div class="sf-tab-content">
<section class="sf-tab-content-wrap active">
Content 1
</section>
<section class="sf-tab-content-wrap">
Content 2
</section>
<section class="sf-tab-content-wrap">
Content 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">Tab 1 (inactive)<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>Tab 1 (active)</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">Tab 2 (inactive)<a></div>
<div class="sf-tab-active py-2 px-4 b-1 b-red bg-red c-white">Tab 2 (active)</div>
</li>
<li>
<div class="sf-tab-inactive py-2 px-4 b-1 bg-white b-red"><a href="#" class="l-red">Tab 3 (inactive)<a></div>
<div class="sf-tab-active py-2 px-4 b-1 b-red bg-red c-white">Tab 3 (active)</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>