Описание компонента Tags

Назначение компонента

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

Классы и их назначение

  • .sf-tag — базовый класс для тега. Определяет основные стили, такие как фон, шрифт, отступы и выравнивание.
  • .sf-tag-1/2 — модификатор, который уменьшает размер шрифта и других элементов внутри тега.
  • .sf-tag--icon — класс для стилизации иконок внутри тега.
  • .sf-tag--number — класс для стилизации числовых значений внутри тега.
  • .sf-tag--dot — класс для стилизации круглых точек, используемых для отображения статусов.
  • .sf-tag--success, .sf-tag--error, .sf-tag--warning — модификаторы для изменения цвета фона и текста в зависимости от статуса (успех, ошибка, предупреждение).

Типы тегов

  1. Текстовые теги — содержат только текст (Label).
  2. Теги с иконками — содержат текст и иконку (например, иконка закрытия).
  3. Теги с аватарами — содержат аватар (круглое изображение) и текст.
  4. Теги с числами — содержат текст и числовое значение.
  5. Теги с точками статуса — содержат точку (цветной индикатор) и текст, обозначающий статус (успех, ошибка, предупреждение).
test

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

Переменная Описание
--sf-tag--background-color Цвет фона тега.
--sf-tag--font-size Размер шрифта текста в теге.
--sf-tag--line-height Высота строки текста в теге.
--sf-tag-icon--font-size Размер шрифта иконки в теге.
--sf-tag-number--size Размер числового значения в теге.
--sf-tag-number--background-color Цвет фона числового значения.
--sf-tag-number--color Цвет текста числового значения.
--sf-tag-dot--diameter Диаметр точки статуса.
--sf-tag-dot--background-color Цвет точки статуса.
--sf-success-95 Цвет фона для тега с статусом "успех".
--sf-error-95 Цвет фона для тега с статусом "ошибка".
--sf-warning-95 Цвет фона для тега с статусом "предупреждение".
--sf-on-success-container-graphic Цвет текста и точки для тега с статусом "успех".
--sf-on-error-container-graphic Цвет текста и точки для тега с статусом "ошибка".
--sf-on-warning-container-graphic Цвет текста и точки для тега с статусом "предупреждение".

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

1. Текстовый тег:

Label 
            
                <span class="sf-tag">
                    <span>Label</span>
                </span>

2. Тег с иконкой:

Label close 
        
            <span class="sf-tag">
                <span>Label</span>
                    <span class="sf-tag--icon">
                        <i class="sf-icon sf-icon-solid">close</i>
                    </span>
            </span>

3. Тег с аватаром:

Label 
        
            <span class="sf-tag">
            <div class="sf-avatar-round sf-avatar-round--1/3">
                <img class="sf-avatar--image" style="background-image: url(img/disney-character-trixie-with-glasses-red-hair_899449-104975.png);">
            </div>
                <span>Label</span>
            </span>

4. Тег с числом:

Label 5 
        
            <span class="sf-tag">
                <span>Label</span>
                <span class="sf-tag--number">5</span>
            </span>

5. Тег с точкой статуса:

Label Label Label 
        
            <span class="sf-tag sf-tag--success">
                <span class="sf-tag--dot"></span>
                <span>Label</span>
            </span>
        
        
            <span class="sf-tag sf-tag--success">
                <span class="sf-tag--dot"></span>
                <span>Label</span>
            </span>
        
        
            <span class="sf-tag sf-tag--success">
                <span class="sf-tag--dot"></span>
                <span>Label</span>
            </span>

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