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

tab
sm
md
lg
xl

В SIMAI Framework с помощью модификаторов можно создавать вкладки

Описание

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

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

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

Контент 1 
<div class="sf-tab">
	<nav>
		<ul class="list-none p-0 m-0 flex">
			<li class="hidden>block block>hidden">
				<div class="block p-1 bg-surface-0 border-bottom-1 border-right-1 border-surface-container cursor-pointer">Вкладка 1 (неактивная)</div>
				<div class="hidden p-1 bg-theme-1 bg-primary color-on-surface-inverse">Вкладка 1 (активная)</div>
			</li>
			<li>
				<div class="block p-1 bg-surface-0 border-bottom-1 border-right-1 border-surface-container cursor-pointer">Вкладка 2 (неактивная)</div>
				<div class="hidden p-1 bg-theme-1 bg-primary color-on-surface-inverse">Вкладка 2 (активная)</div>
			</li>
			<li>
				<div class="block p-1 bg-surface-0 border-bottom-1 border-surface-container cursor-pointer">Вкладка 3 (неактивная)</div>
				<div class="hidden p-1 bg-theme-1 bg-primary color-on-surface-inverse">Вкладка 3 (активная)</div>
			</li>
		</ul>
	</nav>

	<div class="sf-tab-content p-1 bg-surface-0 relative">
		<section class="block">
			Контент 1
		</section>
		<section class="hidden">
			Контент 2
		</section>
		<section class="hidden">
			Контент 3
		</section>
	</div>
</div>

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

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

1 
<div class="sf-tab">
	<nav>
		<ul class="list-none p-0 m-0 flex content-main-center bg-gray-50">
			<li class="hidden>block block>hidden">
				<div class="block p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-1 bg-surface-0 border-red border-right-0 cursor-pointer">Вкладка 1 (неактивная)</div>
				<div class="hidden p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-1 border-red bg-red color-on-surface-inverse"><i class="fa fa-home fa-fw m-right-1/2" aria-hidden="true"></i>Вкладка 1 (активная)</div>
			</li>
			<li>
				<div class="block p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-1 bg-surface-0 border-red border-right-0 cursor-pointer">Вкладка 2 (неактивная)</div>
				<div class="hidden p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-1 border-red bg-red color-on-surface-inverse">Вкладка 2 (активная)</div>
			</li>
			<li>
				<div class="block p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-1 bg-surface-0 border-red cursor-pointer">Вкладка 3 (неактивная)</div>
				<div class="hidden p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 border-1 border-red bg-red color-on-surface-inverse">Вкладка 3 (активная)</div>
			</li>
		</ul>
	</nav>
	<div class="sf-tab-content border-4 border-grey-5 border-top-0 p-1 center t-7 color-on-surface-variant">
		<section class="block">
			1
		</section>
		<section class="hidden">
			2
		</section>
		<section class="hidden">
			3
		</section>
	</div>
</div>

Адаптивность

Для установки адаптивности вкладок, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору.

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

Изменить статью