Компонент Badges

Описание

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

Назначение:

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

Классы:

sf-badge: Основной класс для бейджа.
sf-badge--1/2: Класс для бейджа уменьшенного размера.
sf-badge--2: Класс для бейджа увеличенного размера.
sf-badge--light-grey: Класс для бейджа с светло-серым фоном.
sf-badge--transparent-surface: Класс для бейджа с прозрачным фоном и границей.
sf-badge--primary: Класс для бейджа с основным цветом фона.
sf-badge--light-primary: Класс для бейджа с легким основным цветом фона.
sf-badge--transparent-primary: Класс для бейджа с прозрачным фоном и основным цветом границы.
sf-badge--secondary: Класс для бейджа с вторичным цветом фона.
sf-badge--light-secondary: Класс для бейджа с легким вторичным цветом фона.
sf-badge--transparent-secondary: Класс для бейджа с прозрачным фоном и вторичным цветом границы.
sf-badge--tertiary: Класс для бейджа с третичным цветом фона.
sf-badge--light-tertiary: Класс для бейджа с легким третичным цветом фона.
sf-badge--transparent-tertiary: Класс для бейджа с прозрачным фоном и третичным цветом границы.
sf-badge--on-surface: Класс для бейджа с цветом фона, соответствующим поверхности.
sf-badge--transparent-on-surface: Класс для бейджа с прозрачным фоном и цветом границы, соответствующим поверхности.

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

Стандартный sf-badge

99+

            
            <div class="sf-badge sf-badge--1/2">
                        <i class="sf-icon sf-icon-thin">arrow_upward</i>
                        <span>99+</span>
                        <i class="sf-icon sf-icon-thin">close</i>
                    </div>

                    <div class="sf-badge">
                        <i class="sf-icon sf-icon-thin">arrow_upward</i>
                        <span>99+</span>
                        <i class="sf-icon sf-icon-thin">close</i>
                    </div>

                    <div class="sf-badge sf-badge--2">
                        <i class="sf-icon sf-icon-thin">arrow_upward</i>
                        <span>99+</span>
                        <i class="sf-icon sf-icon-thin">close</i>
                    </div>

sf-badge--light-grey

99+

            
            <div class="sf-badge sf-badge--light-grey sf-badge--1/2">
                        <i class="sf-icon sf-icon-thin">arrow_upward</i>
                        <span>99+</span>
                        <i class="sf-icon sf-icon-thin">close</i>
                    </div>

                    <div class="sf-badge sf-badge--light-grey">
                        <i class="sf-icon sf-icon-thin">arrow_upward</i>
                        <span>99+</span>
                        <i class="sf-icon sf-icon-thin">close</i>
                    </div>

                    <div class="sf-badge sf-badge--light-grey sf-badge--2">
                        <i class="sf-icon sf-icon-thin">arrow_upward</i>
                        <span>99+</span>
                        <i class="sf-icon sf-icon-thin">close</i>
                    </div>

Бэйдж цвета primary

99+

            
            <div class="sf-badge sf-badge--primary sf-badge--1/2">
                        <i class="sf-icon sf-icon-thin">arrow_upward</i>
                        <span>99+</span>
                        <i class="sf-icon sf-icon-thin">close</i>
                    </div>

                    <div class="sf-badge sf-badge--primary">
                        <i class="sf-icon sf-icon-thin">arrow_upward</i>
                        <span>99+</span>
                        <i class="sf-icon sf-icon-thin">close</i>
                    </div>

                    <div class="sf-badge sf-badge--primary sf-badge--2">
                        <i class="sf-icon sf-icon-thin">arrow_upward</i>
                        <span>99+</span>
                        <i class="sf-icon sf-icon-thin">close</i>
                    </div>

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

Название	Значение по умолчанию
`--sf-badge--background-color`	`var(--sf-on-surface-variant)`
`--sf-badge--color`	`var(--sf-surface-0)`
`--sf-badge--font-size`	`var(--sf-text--size-1/3)`
`--sf-badge--border-color`	`none`
`--sf-badge--border-width`	`0px`
`--sf-badge--border-style`	`none`
`--sf-badge--max-height`	`var(--sf-c2)`
`--sf-badge--icon-font-size`	`var(--sf-text--size-2)`

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