Badge (Бейдж)

Виджет Badge отображает количество элементов, требующих внимания пользователя. Обычно это небольшая точка или индикатор, который размещается поверх других виджетов, например, IconButton.

Например, вы можете использовать Badge, чтобы показать количество непрочитанных уведомлений или товаров в корзине.

Добавление виджета Badge

Пример того, как добавить виджет Badge в проект:

1. Перетащите Badge из вкладки Base Elements и поместите его в раздел Actions панели AppBar.
2. Добавьте внутрь Badge виджет IconButton. Настройте иконку и её цвет по своему усмотрению.
3. Выберите Badge, откройте панель свойств и установите верхний отступ (top) = 5, правый отступ (right) = 15.

Настройка

Вы можете изменить внешний вид и поведение виджета Badge с помощью различных свойств в панели свойств (Properties Panel).

Установка текста бейджа

Вы можете задать текст, отображаемый внутри бейджа. Обычно это числовое значение.

Чтобы установить текст бейджа:

1. Выберите Badge на холсте или в иерархии виджетов.
2. В панели свойств перейдите в раздел Badge Properties.
3. Найдите свойство Text и введите значение.
   Обычно это значение подставляется из переменной или поля базы данных (например, переменная API или поле Firestore). Для этого нажмите Set from Variable.

Изменение стиля текста

Чтобы изменить стиль текста внутри бейджа:

1. Выберите Badge.
2. Перейдите в Badge Properties.
3. Найдите параметр Theme Text Style и настройте стиль в соответствии с инструкцией.

Отображение и скрытие бейджа

Вы можете скрыть бейдж по умолчанию и показывать его только при необходимости — например, если появились новые уведомления.

1. Выберите Badge.
2. В панели свойств найдите параметр Show Badge.
3. Отметьте или снимите галочку, чтобы показать/скрыть бейдж.
   Часто это значение также задаётся из переменной (App State или API).

Изменение цвета бейджа

Чтобы изменить цвет бейджа:

1. Выберите Badge.
2. Перейдите в Badge Properties.
3. Найдите Badge Color, щёлкните по цвету и выберите новый или введите Hex-код вручную.
   Можно также выбрать вкладку Palette или Simple.

Изменение тени (Elevation)

Чтобы изменить высоту (глубину, ось Z) бейджа:

1. Выберите Badge.
2. Перейдите в Badge Properties.
3. Найдите параметр Elevation и установите значение.
   Чем выше значение — тем сильнее тень. Значение 0 полностью убирает её.

Изменение позиции бейджа

По умолчанию бейдж расположен в правом верхнем углу дочернего виджета, но его можно переместить влево.

1. Выберите Badge.
2. Перейдите в Badge Properties.
3. Найдите свойство Position (Start or End) и выберите нужную иконку для изменения положения.

Анимация бейджа

По умолчанию виджет Badge анимируется при изменении значения.

Чтобы включить или отключить анимацию:

1. Выберите Badge.
2. Перейдите в Badge Properties.
3. Найдите переключатель Animate и включите или выключите его.