Компонент Badges

Описание

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

Назначение:

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

Параметры компонента:

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

Данные компонента:

• text - текст бэйджа
• icon_right - иконка справа (если есть)
• icon_left - иконка справа (если есть)

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

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

            
<smart
  name="badges"
  sf-code="badges"
  property='{"size": "small", "color": "primary"}'
  data='{
  "icon_left": "arrow_upward",
        "icon_right": "close",
"text":"Текст бэйджа"}'
>
 </smart>

 <
smart
  name="badges"
  sf-code="badges"
  property='{"color": "primary"}'
  data='{
  "icon_left": "arrow_upward",
        "icon_right": "close",
"text":"Текст бэйджа"}'
>
</smart>

<smart
  name="badges"
  sf-code="badges"
  property='{"size": "big", "color": "primary"}'
  data='{
  "icon_left": "arrow_upward",
        "icon_right": "close",
"text":"Текст бэйджа"}'
>
</smart>
            
        

light-grey

            
<smart
  name="badges"
  sf-code="badges"
  property='{"size": "small", "color": "light-grey"}'
  data='{
  "icon_left": "arrow_upward",
        "icon_right": "close",
"text":"Текст бэйджа"}'
>
</smart>

<smart
  name="badges"
  sf-code="badges"
  property='{"color": "light-grey"}'
  data='{
  "icon_left": "arrow_upward",
        "icon_right": "close",
"text":"Текст бэйджа"}'
>
</smart>

<smart
  name="badges"
  sf-code="badges"
  property='{"size": "big", "color": "light-grey"}'
  data='{
  "icon_left": "arrow_upward",
        "icon_right": "close",
"text":"Текст бэйджа"}'
>
</smart>
            
        

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