Badges

<sf-badge> показывает короткую пометку рядом с объектом: статус записи, категорию, версию, число новых событий. Пометку не нажимают. Элемент строится на классах компонента Бейджи; для метки, которую выбирают или удаляют, берите Tags.

Пример

<div class="flex flex-wrap gap-2 items-cross-center">
  <sf-badge text="Черновик"></sf-badge>
  <sf-badge appearance="tonal" status="success" icon="check" text="Опубликовано"></sf-badge>
  <sf-badge appearance="outline" scheme="primary" text="Новое"></sf-badge>
  <sf-badge status="error" text="3" aria-label="3 ошибки"></sf-badge>
</div>

Применение

Вид, цвет и статус

У пометки три отдельные оси:

status сильнее scheme: пометка со статусом окрашивается по статусу. Цветовую роль берите для категорий, статус — для состояния объекта, и не передавайте состояние одним цветом — текст пометки называет его словами.

Размер

size — ступень 1/3 (по умолчанию), 1/2 или 1. В строке таблицы или в ряду полей задайте line (1/2, 1, 2): пометка займёт строку текста этого размера формы, и строка не станет выше.

Иконки

icon ставит иконку перед текстом; icon-position="end" переносит её за текст. Для двух иконок сразу есть icon-start и icon-end. Слоты text, icon-start и icon-end заменяют части своей разметкой.

<sf-badge appearance="tonal" scheme="primary" icon="schedule" text="2 дня"></sf-badge>

Доступность

• Пометка — текст, она не получает фокус и не реагирует на клавиатуру.
• Видимый текст читается как есть. Если он понятен только из контекста — число «3», сокращение «β», — задайте aria-label с полным смыслом: «3 ошибки». Тогда экранный диктор читает aria-label вместо видимого текста.
• Пометка без текста и без aria-label скрыта от экранного диктора: так ведёт себя точка или одна иконка. Сообщите то же самое текстом рядом.
• Иконки декоративны.

Справочник API

Раздел собран из манифеста компонента выпуска ui-106d5901f8c3 и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест.

Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: search-placeholder — searchPlaceholder. Свойство атрибута template называется templateName.

Атрибуты

• template — string, по умолчанию default.
• size — string, по умолчанию 1/3, значения: 1/3, 1/2, 1.
• line — string, по умолчанию пусто, значения: пусто, 1/2, 1, 2. Занимает строку текста этого размера формы — для ячейки таблицы или ряда полей, чтобы строка сохраняла высоту элемента управления.
• appearance — string, по умолчанию main, значения: main, tonal, outline. Вид значка: наиболее заметная заливка, более спокойная тональная или контур.
• scheme — string, по умолчанию neutral, значения: neutral, primary, secondary, tertiary, on-surface. Какой смысловой цвет берёт бейдж. Слово статуса здесь тоже работает и попадает на ось status.
• status — string, по умолчанию пусто, значения: пусто, info, success, warning, error. О чём сообщает бейдж, в общем словаре статусов. Также принимается значение danger; оно означает error.
• text — string, по умолчанию пусто.
• icon — string, по умолчанию пусто.
• icon-start — string, по умолчанию null.
• icon-end — string, по умолчанию null.
• icon-position — string, по умолчанию start, значения: start, end.
• aria-label — string, по умолчанию пусто.

Прежние имена:

Методы

Публичных методов нет.

События

Своих событий нет; общие события базового элемента перечислены в главе Жизненный цикл → Этапы.

Доступность

• Доступное имя: рекомендуется.
• Фокус: Значок — статические метаданные, в порядок табуляции не входит.

Минимальная разметка

<sf-badge></sf-badge>

Источник

• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/smart/badges
• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/rule/rule.json#name=cl-badges

См. также

• Бейджи — пометки на классах.
• Tags — метка, которую выбирают и удаляют.