Вкладки

Компонент Tabs

Описание

Компонент tabs (вкладки) используется для организации контента на странице, позволяя пользователю переключаться между различными разделами или категориями. Вкладки могут содержать текст, иконки, числа или их комбинацию.

Назначение:

• Навигация: Позволяет пользователю быстро переключаться между разделами контента.
• Организация контента: Помогает структурировать информацию на странице, делая её более удобной для восприятия.
• Интерактивность: Вкладки могут быть кликабельными, а также поддерживают состояния (например, активная вкладка, наведение, отключение).

Состояния:

• Обычное состояние: Вкладка отображается с базовыми стилями.
• Состояние при наведении:hover: При наведении курсора вкладка изменяет цвет фона или текста.
• Активное состояние:active: Активная вкладка выделяется стилем (например, другим цветом фона или текста).
• Состояние при фокусе:focus: Когда вкладка в фокусе (например, при навигации с клавиатуры), она может выделяться.
• Отключенное состояние:disable: Вкладка становится недоступной для взаимодействия и визуально выделяется (например, серым цветом).

Классы:

• .sf-tab: Основной класс для вкладки.
• .sf-tab--1/3: Класс для вкладки уменьшенного размера (1/3 от стандартного).
• .sf-tab--1/2: Класс для вкладки среднего размера (1/2 от стандартного).
• .sf-tab--2: Класс для вкладки увеличенного размера (2x от стандартного).
• .sf-tab--3: Класс для вкладки большого размера (3x от стандартного).
• .sf-tab--transparent: Класс для вкладки с прозрачным фоном и границей.
• .sf-tab--text: Класс для текста внутри вкладки.
• .sf-tab--number: Класс для числового значения внутри вкладки.
• .icon: Класс для иконки внутри вкладки.

Пример использования

            
<div class="row">
    <button class="sf-tab sf-tab--1/3">
        <span class="sf-tab--text">Tab</span>
        <span class="sf-tab--number">12</span>
    </button>
    <button class="sf-tab sf-tab--1/2">
        <span class="sf-tab--text">Tab</span>
        <span class="sf-tab--number">12</span>
    </button>
    <button class="sf-tab">
        <span class="sf-tab--text">Tab</span>
        <span class="sf-tab--number">12</span>
    </button>
    <button class="sf-tab sf-tab--2">
        <span class="sf-tab--text">Tab</span>
        <span class="sf-tab--number">12</span>
    </button>
    <button class="sf-tab sf-tab--3">
        <span class="sf-tab--text">Tab</span>
        <span class="sf-tab--number">12</span>
    </button>
</div>
            
        

Таблица переменных CSS

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