nativeLabel

nativeLabel представляет элемент HTML label, который создает надпись для компонента.

XML-элемент	`nativeLabel`
Java-класс	`NativeLabel`
Атрибуты	id - alignSelf - classNames - colspan - css - dataContainer - enabled - height - maxHeight - maxWidth - minHeight - minWidth - property - setFor - text - themeNames - title - visible - whiteSpace - width
Обработчики	AttachEvent - ClickEvent - DetachEvent

XML-элемент

nativeLabel

Java-класс

NativeLabel

Атрибуты

id - alignSelf - classNames - colspan - css - dataContainer - enabled - height - maxHeight - maxWidth - minHeight - minWidth - property - setFor - text - themeNames - title - visible - whiteSpace - width

Обработчики

AttachEvent - ClickEvent - DetachEvent

Основы

Компонент nativeLabel может служить альтернативой атрибуту label, который присутствует в большинстве UI-компонентов Jmix.

Чтобы установить надпись для компонента, передайте его идентификатор в атрибут setFor. Например, чтобы установить надпись для компонента checkbox:

<div>
    <checkbox id ="checkbox"/>
    <nativeLabel text="Enable Notifications" setFor="checkbox"/>
</div>

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

Для добавления текста, не связанного с компонентом, используйте компоненты span или div.

Динамическая надпись

Чтобы динамически установить или обновить текст в nativeLabel, сначала укажите его атрибут id:

<nativeLabel id="dynamicLabel" setFor="button"/>
<button id="button" text="Click"/>

Используйте этот id для ссылки на надпись в контроллере экрана и обновления текста с помощью метода setText():

@ViewComponent
private NativeLabel dynamicLabel;

@Subscribe("button")
public void onButtonClick(final ClickEvent<JmixButton> event) {
    dynamicLabel.setText("Button clicked " + event.getClickCount() + " times.");
}

Темы

Используйте атрибут themeNames для настройки цвета, размера и формы компонента. Начните с преобразования компонента в бейдж с помощью themeNames = "badge". Затем примените дополнительные темы для улучшения различных визуальных аспектов.

Цвет

Выберите среди четырех вариантов цвета для передачи визуального назначения компонента: по умолчанию, success, error и contrast.

XML-код

<nativeLabel text="default" themeNames="badge"/>
<nativeLabel text="success" themeNames="badge, success"/>
<nativeLabel text="error" themeNames="badge, error"/>
<nativeLabel text="contrast" themeNames="badge, contrast"/>

Сочетайте варианты цвета с темой primary для добавления дополнительного акцента:

XML-код

<nativeLabel text="default" themeNames="badge, primary"/>
<nativeLabel text="success" themeNames="badge, success, primary"/>
<nativeLabel text="error" themeNames="badge, error, primary"/>
<nativeLabel text="contrast" themeNames="badge, contrast, primary"/>

Форма

Применение темы pill создает бейдж со скругленными углами. Используйте ее независимо или в сочетании с цветовыми темами:

XML-код

<nativeLabel text="default" themeNames="badge, pill"/>
<nativeLabel text="success" themeNames="badge, success, pill"/>
<nativeLabel text="error" themeNames="badge, error, pill"/>
<nativeLabel text="contrast" themeNames="badge, contrast, pill"/>

Размер

Доступны два варианта размера: размер по умолчанию normal и small.

XML-код

<nativeLabel text="normal" themeNames="badge, normal"/>
<nativeLabel text="small" themeNames="badge, small"/>

Атрибуты

В Jmix существует множество общих атрибутов, которые служат одной цели для всех компонентов.

Следующие атрибуты специфичны для nativeLabel:

Название	Описание	Значение по умолчанию
themeNames	Добавляет тему к компоненту. Возможные значения: `badge`, `normal`, `success`, `error`, `contrast`, `primary`, `small`, `pill`. Чтобы тема вступила в силу, объедините `badge` с другим значением, как показано выше. Предопределенные темы — это наборы CSS-классов, которые могут влиять на другие параметры стилизации компонента или его вложенных компонентов.	-
setFor	Связывает надпись с конкретным элементом по его идентификатору, позволяя вспомогательным технологиям, таким как программы чтения с экрана, правильно ее интерпретировать.	-

Название

Описание

Значение по умолчанию

themeNames

Добавляет тему к компоненту. Возможные значения: badge, normal, success, error, contrast, primary, small, pill. Чтобы тема вступила в силу, объедините badge с другим значением, как показано выше.

Предопределенные темы — это наборы CSS-классов, которые могут влиять на другие параметры стилизации компонента или его вложенных компонентов.

setFor

Связывает надпись с конкретным элементом по его идентификатору, позволяя вспомогательным технологиям, таким как программы чтения с экрана, правильно ее интерпретировать.

Обработчики

В Jmix существует множество общих обработчиков, которые настраиваются одинаково для всех компонентов.

Следующие обработчики специфичны для nativeLabel:

Чтобы сгенерировать заглушку обработчика в Jmix Studio, используйте вкладку Handlers панели инспектора Jmix UI, или команду Generate Handler, доступную на верхней панели контроллера экрана и через меню Code → Generate (Alt+Insert / Cmd+N).

Название	Описание
ClickEvent	`com.vaadin.flow.component.ClickEvent` возникает при клике на компонент. Этот обработчик должен указывать один из трех субъектов для определения количества кликов: click – событие возникает при любом клике на компонент. singleClick – событие возникает после таймаута, чтобы убедиться, что это не двойной клик. doubleClick – событие возникает при двойном клике на компонент.

Название

Описание

ClickEvent

com.vaadin.flow.component.ClickEvent возникает при клике на компонент. Этот обработчик должен указывать один из трех субъектов для определения количества кликов:

click – событие возникает при любом клике на компонент.

singleClick – событие возникает после таймаута, чтобы убедиться, что это не двойной клик.

doubleClick – событие возникает при двойном клике на компонент.

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

Дополнительную информацию смотрите в документации MDN.