Точка состояния — компактный неинтерактивный индикатор доступности,
активности или результата. Она подходит для строк списка и других мест, где
текстовый бейдж занял бы слишком много
места.
Минимальную разметку показывает пример выше: блок sf-dot с одной частью
sf-dot-item внутри.
sf-dot — строчный контейнер с небольшим отступом вокруг точки; на нём
размер и статус.
sf-dot-item — сама точка. Без неё блок пуст.
Без класса статуса точка окрашена основным цветом, без размера — ступенью
1.
Варианты
Статус
Статус задаёт цвет точки: sf-dot--primary (основной цвет, он же цвет по
умолчанию), sf-dot--info, sf-dot--success, sf-dot--warning,
sf-dot--error и sf-dot--neutral для отсутствия статуса. Выбирайте статус
по реальному состоянию объекта.
Четыре ступени — sf-dot--size-1/3, sf-dot--size-1/2, sf-dot--size-1 и
sf-dot--size-2 — меняют диаметр точки. Берите ступень текста, рядом с
которым стоит точка.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Переменные
Компонент читает свои переменные, а модификаторы задают им значения; таблица показывает, из чего складывается вид. Переменные компонента — его внутренняя проводка, а не поверхность настройки: их имена и устройство могут меняться. Вид проекта меняют общие токены, а глубокий вид Smart-компонента — его шаблон (см. Переменные компонента). Значение по умолчанию — из базового правила блока (.sf-dot); переменную без него задают только модификаторы.
Переменная
По умолчанию
Задаёт
--sf-dot-item--background-color
var(--sf-primary)
background-color
--sf-dot-item--border-radius
не задана; задают модификаторы, например .sf-dot .sf-dot-item: var(--sf-radius-circle)
