badge

Начиная с Jmix 3.1

badge отображает небольшой фрагмент информации, например статус, счётчик или метку.

XML-элемент

badge

Java-класс

Badge

Основы

ДЕМО

Атрибут text задаёт надпись на бейдже. Делайте её короткой: одно или два слова. Варианты темы success, warning и error задают цвет бейджа. Без варианта бейдж использует акцентный цвет темы.

<badge id="pendingBadge" text="Pending"/>
<badge id="confirmedBadge" text="Confirmed" themeNames="success"/>
<badge id="warningBadge" text="Warning" themeNames="warning"/>
<badge id="deniedBadge" text="Denied" themeNames="error"/>
Бейджи с цветом по умолчанию и цветами success, warning и error

Бейджи похожи на кнопки, но не реагируют на действия пользователя.

badge, связанный с данными

ДЕМО

Бейдж может показывать значение атрибута сущности. Свяжите его с контейнером данных с помощью атрибутов dataContainer и property:

<data>
    <instance id="customerDc"
              class="io.jmix.uisamples.entity.Customer"
              fetchPlan="_local"/>
</data>
<layout>
    <hbox alignItems="CENTER">
        <badge id="nameBadge" icon="USER" dataContainer="customerDc" property="name"/>
        <badge id="gradeBadge" themeNames="success" dataContainer="customerDc" property="grade"/>
    </hbox>
</layout>

Связь работает только на чтение. Бейдж показывает значение атрибута как текст и обновляет его при изменении значения. Значение форматируется в соответствии с его типом данных. Например, значение перечисления показывается как его локализованное название, а значение null — как пустой бейдж.

Если у текущего пользователя нет прав на просмотр атрибута, бейдж скрыт.

Иконки

ДЕМО

Бейдж может показывать иконку перед текстом. Задайте иконку с помощью атрибута icon или вложенного элемента icon:

<badge id="pendingBadge" text="Pending" icon="CLOCK"/>
<badge id="confirmedBadge" text="Confirmed" icon="CHECK" themeNames="success"/>
<badge id="warningBadge" text="Warning" icon="WARNING" themeNames="warning"/>
<badge id="deniedBadge" text="Denied" themeNames="error">
    <icon>
        <icon icon="EXCLAMATION_CIRCLE"/>
    </icon>
</badge>
Бейджи с иконкой перед текстом

Вариант icon-only показывает только иконку. Всё равно задайте текст: он скрыт на экране, но программы чтения с экрана его озвучивают.

<badge id="confirmedIconBadge" text="Confirmed" icon="CHECK" themeNames="success icon-only"/>
<badge id="deniedIconBadge" text="Denied" icon="CLOSE" themeNames="error icon-only"/>

Число

ДЕМО

Атрибут number показывает число в бейдже, например количество непрочитанных сообщений. Если у бейджа есть и текст, и число, он показывает и то, и другое.

Вариант number-only показывает только число. Как и для icon-only, задайте текст для программ чтения с экрана:

<badge id="numberOnlyBadge" text="unread messages" number="5" themeNames="number-only"/>

В контроллере экрана используйте метод setNumber(), чтобы изменить число, и setNumber(null), чтобы убрать его.

Программы чтения с экрана читают только содержимое бейджа. Одно число может запутать пользователей, поэтому задайте текст, который говорит, что именно подсчитано. Если число меняется, пока экран открыт, установите для ariaRole значение status, и программы чтения с экрана будут озвучивать новое значение.

Варианты темы

ДЕМО

Используйте атрибут themeNames, чтобы применить варианты. Можно сочетать несколько вариантов, например themeNames="success filled". В контроллере экрана используйте метод addThemeVariants() с перечислением BadgeVariant.

Бейджи с вариантами filled, icon-only, number-only и dot
Вариант Описание Поддерживается в

success, warning, error

Применяет смысловой цвет.

Aura, Lumo

contrast

Применяет нейтральный высококонтрастный цвет.

Lumo

filled

Использует сплошной фон вместо полупрозрачного, чтобы привлечь больше внимания. Можно сочетать со всеми остальными вариантами.

Aura, Lumo

small

Делает бейдж меньше.

Aura, Lumo

icon-only

Показывает только иконку. См. Иконки.

Aura, Lumo

number-only

Показывает только число. См. Число.

Aura, Lumo

dot

Показывает бейдж в виде маленькой точки и скрывает всё его содержимое.

Aura, Lumo

Атрибуты

Общие атрибуты служат одной и той же цели для всех компонентов. Следующие атрибуты специфичны для badge:

Имя Описание По умолчанию

ariaRole

Задаёт ARIA-роль бейджа, которую используют программы чтения с экрана. Например, status заставляет программы чтения с экрана озвучивать изменения содержимого бейджа. См. Число.

—

icon

Задаёт иконку, отображаемую перед текстом. См. Иконки.

—

number

Задаёт число, отображаемое в бейдже. См. Число.

—

themeNames

Применяет один или несколько вариантов, перечисленных в разделе Варианты темы.

—

badge поддерживает следующие общие атрибуты:

id - alignSelf - classNames - colspan - css - dataContainer - height - justifySelf - maxHeight - maxWidth - minHeight - minWidth - property - text - visible - whiteSpace - width

Обработчики

badge поддерживает следующие общие обработчики:

AttachEvent - DetachEvent

Элементы

badge может содержать вложенный элемент icon. См. Иконки.

Смотрите также