Общие атрибуты

allowedCharPattern

Vaadin

Устанавливает регулярное выражение для ввода данных пользователя на стороне клиента. Оно должно быть допустимым регулярным выражением JavaScript, которое соответствует одному символу, а не последовательности символов.

Например, чтобы разрешить ввод только цифр и косой черты, используйте "[0-9/]" шаблон.

alignItems

MDN

Определяет расположение элементов относительно поперечной оси. Возможные значения:

  • START – элементы размещаются в начале поперечной оси.

  • END – элементы размещаются в конце поперечной оси.

  • CENTER – элементы центрируются в поперечной оси.

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

  • BASELINE – элементы размещаются на базовой линии контейнера. Работает только для flex-direction: row.

  • AUTO – элемент наследует свойство alignItems своего родительского контейнера или "stretch", если у него нет родительского контейнера.

Вы можете найти примеры использования в разделе Правила Компоновки.

alignSelf

MDN

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

  • START – элемент размещается в начале поперечной оси.

  • END – элемент размещается в конце поперечной оси.

  • CENTER – элемент центрируется в поперечной оси.

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

  • BASELINE – элемент размещается на базовой линии контейнера. Работает только для flex-direction: row.

  • AUTO – элемент наследует свойство alignItems своего родительского контейнера или "stretch", если у него нет родительского контейнера.

Вы можете найти примеры использования в разделе Правила Компоновки.

ariaLabel

MDN

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

ariaLabelledBy

MDN

Позволяет ссылаться на другой компонент, чтобы определить доступное имя используемое для технологий обеспечения доступности, таких как программы чтения с экрана. Данное свойство имеет приоритет над другими методами задания доступного имени, включая ariaLabel и текст внутри компонента.

autocapitalize

MDN

Устанавливает HTML-атрибут autocapitalize. Он используется для задания автоматического перевода текста, вводимого пользователем, в верхний регистр.

autocomplete

MDN

Устанавливает HTML-атрибут autocomplete, указывающий, может ли значение этого компонента автоматически заполняться браузером.

autocorrect

MDN

Устанавливает для поля HTML-атрибут autocorrect.

Данный атрибут поддерживается только в Safari.

autofocus

Указывает, что компонент должен иметь фокус ввода при загрузке страницы.

Возможные значения: true, false. По умолчанию все компоненты не в фокусе.

classNames

Vaadin

Добавляет компоненту имена классов CSS.

Доступные имена классов берутся из следующих источников:

  • Класс com.vaadin.flow.theme.lumo.LumoUtility и его вложенные классы.

  • Класс io.jmix.flowui.themes.JmixLumoUtility.

  • Любые пользовательские классы, аннотированные @ThemeUtilityClasses. Вы можете предоставлять общие имена классов в своих собственных дополнениях и в исходном коде приложения.

Jmix Studio предоставляет расширенные возможности для ввода classNames в свойствах UI-компонентов с помощью ClassNames Wizard.

clearButtonVisible

Vaadin

Устанавливает видимость кнопки очистки поля.

clickShortcut

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

colspan

Устанавливает количество столбцов, которые должен занимать компонент, если он расположен в formLayout.

По умолчанию 1.

css

Позволяет декларативно указывать CSS-свойства для компонентов UI.

В этом примере атрибут css используется для применения встроенных стилей к компоненту textField, включая установку цвета фона, границы, отступов и размера шрифта:

<textField datatype="int"
           css="background-color: #f0f0f0;
                border: 1px solid #ccc;
                padding: 5px;
                font-size: 16px;"/>

В примере ниже атрибут css используется для предоставления встроенного CSS для компонента button.

<button id="stepperUpBtn"
        icon="vaadin:chevron-up"
        css="background-color: #4CAF50;
             color: #fff;
             border: none;
             padding: 10px 20px;
             font-size: 16px;
             cursor: pointer"/>

dataContainer

Устанавливает контейнер данных, определенный в разделе data XML-дескриптора экрана.

При установке в dataContainer контейнера экземпляра, необходимо также установить атрибут property.

datatype

Устанавливает тип данных содержимого компонента. Возможные значения:

  • boolean

  • byteArray

  • char

  • date

  • dateTime

  • decimal

  • double

  • fileRef

  • int

  • localDate

  • localDateTime

  • localTime

  • long

  • offsetDateTime

  • offsetTime

  • string

  • time

  • uri

  • uuid

Данный атрибут необходимо установить если компонент не связан с каким-либо атрибутом сущности. В противном случае тип данных определяется типом атрибута сущности.

dateFormat

Vaadin

Устанавливает предпочтительный формат для значений даты в компоненте. По умолчанию используется формат даты текущей локали.

enabled

Vaadin

Делает компонент явно отключенным или включенным.

errorMessage

Устанавливает компоненту сообщение об ошибке.

flexGrow

MDN

Устанавливает коэффициент расширения flex для этого компонента. Если установлено значение 0, ширина фиксируется.

focusShortcut

Определяет сочетание клавиш, которое используется для установки фокуса на этот компонент.

height

Vaadin

Устанавливает высоту компонента.

Высота должна быть в формате, понятном браузеру, например, "100px" или "2.5em".

Вы можете найти примеры использования в разделе Правила Компоновки.

helperText

Vaadin

Задает текст рядом с полем. Его можно использовать, например, для информирования пользователей о том, какие значения ожидает компонент.

id

Идентификатор компонента.

Рекомендуется создавать идентификаторы по правилам идентификаторов Java и использовать camelСase, например: userGrid, filterPanel. Атрибут id можно указать для любого компонента и он должен быть уникальным в пределах экрана.

invalid

Устанавливает недопустимое состояние поля с учетом результата валидации.

  • Если invalid=false, то поле отбражается в допустимом состоянии независимо от результата валидации.

  • If invalid=true, то поле отбражается в допустимом состоянии только если валидация прошла успешно.

label

Vaadin

Устанавливает надпись для компонента.

Значением атрибута может быть либо сам текст, либо ключ в пакете сообщений. В случае ключа значение должно начинаться с `msg:// `префикса.

maxHeight

MDN
Vaadin

Устанавливает CSS-свойство max-height компонента. Высота должна быть в формате, понятном браузеру, например, "100px" или "2.5em".

Вы можете найти примеры использования в разделе Правила Компоновки.

maxLength

MDN
Vaadin

Устанавливает максимальное количество символов, которое принимает поле.

maxWidth

MDN
Vaadin

Устанавливает CSS-свойство max-width компонента. Ширина должна быть в формате, понятном браузеру, например, "100px" или "2.5em".

Вы можете найти примеры использования в разделе Правила Компоновки.

metaClass

Определяет класс сущности для компонентов, отображающих сущности, например, DataGrid или entityComboBox.

Установите этот атрибут, если компонент не связан с контейнером данных. В противном случае класс сущности определяется контейнером данных.

minHeight

MDN
Vaadin

Устанавливает CSS-свойство min-height компонента. Высота должна быть в формате, понятном браузеру, например, "100px" или "2.5em".

Вы можете найти примеры использования в разделе Правила Компоновки.

minLength

MDN
Vaadin

Устанавливает минимальное количество символов, которое принимает поле.

minWidth

MDN
Vaadin

Устанавливает CSS-свойство min-width компонента. Ширина должна быть в формате, понятном браузеру, например, "100px" или "2.5em".

Вы можете найти примеры использования в разделе Правила Компоновки.

overlayClass

Определяет список имен CSS-классов, которые будут установлены для элемента наложения.

pattern

MDN
Vaadin

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

placeholder

Vaadin

Определяет подсказку пользователю о том, что можно ввести в компонент.

property

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

property всегда используется вместе с атрибутом dataContainer.

readOnly

Vaadin

Устанавливает компонент в режим только для чтения.

required

Vaadin

Указывает, что для этого поля требуется значение.

Используйте свойство приложения jmix.ui.component.immediate-required-validation-enabled, чтобы контролировать, когда обязательное поле выделяется.

requiredIndicatorVisible

Vaadin

Устанавливает видимым индикатор необходимости ввода значения.

requiredMessage

Используется вместе с атрибутом required. Устанавливает сообщение, которое будет отображаться пользователю, когда компонент не имеет значения.

Атрибут может содержать само сообщение или ключ из пакета сообщений, например: requiredMessage="msg://infoTextField.requiredMessage"

step

Устанавливает интервал времени в минутах между значениями, доступными для выбора в компонентах timePicker и dateTimePicker. Значение по умолчанию 60:

tabIndex

MDN

Устанавливает HTML-атрибут tabindex в компоненте. Атрибут указывает, может ли его элемент быть сфокусирован и как он участвует в последовательной навигации с помощью клавиатуры:

  • Отрицательное значение (обычно tabindex = -1 означает, что компонент должен быть доступен для фокуса, но не должен быть достижим при последовательной навигации с помощью клавиатуры.

  • tabindex = `0 означает, что компонент должен быть доступен для фокусировки при последовательной навигации с помощью клавиатуры, но его порядок определяется исходным порядком документа.

  • Положительное значение означает, что компонент должен быть доступен для фокусировки при последовательной навигации с помощью клавиатуры, а его порядок определяется значением атрибута. То есть tabindex = 4 фокусируется до tabindex = 5, но после tabindex = 3. Если несколько компонентов имеют одно и то же положительное значение tabindex, их порядок относительно друг друга соответствует их положению в документе.

text

Задает текстовое содержимое компонента.

Значением атрибута может быть либо сам текст, либо ключ в пакете сообщений. В случае ключа значение должно начинаться с msg:// префикса.

Есть два способа задания ключа:

  • Короткий ключ - в этом случае сообщение будет искаться в группе сообщений текущего экрана. Например: msg://infoField.caption.

  • Полный ключ, включающий группу сообщений, например: msg://com.company.sample.view.user/infoField.caption.

themeNames

Добавляет компоненту тему.

title

Значение атрибута устанавливается в HTML-атрибуты title и aria-label. Большинство компонентов интерпретируют его как всплывающую подсказку.

value

Задает новое значение для компонента. Если новое значение отличается от возвращаемого методом getValue(), происходит генерация события изменения значения. В случае неприемлемости значения может быть выброшено исключение IllegalArgumentException.

valueChangeMode

Vaadin

Устанавливает новый режим изменения значения для компонента.

valueChangeTimeout

Vaadin

Применяет тайм-аут изменения значения для данного valueChangeMode.

visible

Vaadin

Устанавливает видимость компонента.

weekNumbersVisible

Vaadin

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

whiteSpace

MDN

Устанавливает CSS-свойство white-space.

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

width

Vaadin

Устанавливает ширину компонента. Ширина должна быть в формате, понятном браузеру, например, "100px" или "2.5em".

Вы можете найти примеры использования в разделе Правила Компоновки.