Общие атрибуты
allowedCharPattern
Устанавливает регулярное выражение для ввода данных пользователя на стороне клиента. Оно должно быть допустимым регулярным выражением JavaScript, которое соответствует одному символу, а не последовательности символов.
Например, чтобы разрешить ввод только цифр и косой черты, используйте "[0-9/]" шаблон.
alignItems
Определяет расположение элементов относительно поперечной оси. Возможные значения:
-
START – элементы размещаются в начале поперечной оси.
-
END – элементы размещаются в конце поперечной оси.
-
CENTER – элементы центрируются в поперечной оси.
-
STRETCH – элементы с неопределенным размером вдоль поперечной оси растягиваются, чтобы соответствовать контейнеру.
-
BASELINE – элементы размещаются на базовой линии контейнера. Работает только для
flex-direction: row. -
AUTO – элемент наследует свойство alignItems своего родительского контейнера или "stretch", если у него нет родительского контейнера.
Вы можете найти примеры использования в разделе Правила Компоновки.
alignSelf
Определяет расположение отдельных компонентов внутри контейнера переопределяя при этом значение атрибута alignItems. Возможные значения:
-
START – элемент размещается в начале поперечной оси.
-
END – элемент размещается в конце поперечной оси.
-
CENTER – элемент центрируется в поперечной оси.
-
STRETCH – элемент с неопределенным размером вдоль поперечной оси растягивается, чтобы соответствовать контейнеру.
-
BASELINE – элемент размещается на базовой линии контейнера. Работает только для
flex-direction: row. -
AUTO – элемент наследует свойство alignItems своего родительского контейнера или "stretch", если у него нет родительского контейнера.
Вы можете найти примеры использования в разделе Правила Компоновки.
ariaLabel
Устанавливает отдельную, визуально скрытую метку для технологий обеспечения доступности, таких как программы чтения с экрана.
autocapitalize
Устанавливает HTML-атрибут autocapitalize. Он используется для задания автоматического перевода текста, вводимого пользователем, в верхний регистр.
autocomplete
Устанавливает HTML-атрибут autocomplete, указывающий, может ли значение этого компонента автоматически заполняться браузером.
autofocus
Указывает, что компонент должен иметь фокус ввода при загрузке страницы.
Возможные значения: true, false. По умолчанию все компоненты не в фокусе.
clickShortcut
Defines the keyboard shortcut to fire a click event associated with the component. The component must have an appropriate handler to process the click event, otherwise the key combination will not have any effect.
colspan
Устанавливает количество столбцов, которые должен занимать компонент, если он расположен в formLayout.
По умолчанию 1.
css
Позволяет декларативно указывать CSS-свойства для компонентов UI.
In this example, the css attribute is used to apply inline styles to the textField component, including setting the background color, border, padding, and font size:
<textField datatype="int"
css="background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 5px;
font-size: 16px;"/>In the example below, the css attribute is used to provide inline CSS for the button component.
<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
Устанавливает предпочтительный формат для значений даты в компоненте. По умолчанию используется формат даты текущей локали.
height
Устанавливает высоту компонента.
Высота должна быть в формате, понятном браузеру, например, "100px" или "2.5em".
helperText
Задает текст рядом с полем. Его можно использовать, например, для информирования пользователей о том, какие значения ожидает компонент.
id
Идентификатор компонента.
Рекомендуется создавать идентификаторы по правилам идентификаторов Java и использовать camelСase, например: userGrid, filterPanel. Атрибут id можно указать для любого компонента и он должен быть уникальным в пределах экрана.
invalid
Устанавливает недопустимое состояние поля с учетом результата валидации.
-
Если
invalid=false, то поле отбражается в допустимом состоянии независимо от результата валидации. -
If
invalid=true, то поле отбражается в допустимом состоянии только если валидация прошла успешно.
label
Устанавливает надпись для компонента.
Значением атрибута может быть либо сам текст, либо ключ в пакете сообщений. В случае ключа значение должно начинаться с `msg:// `префикса.
metaClass
Определяет класс сущности для компонентов, отображающих сущности, например, DataGrid или entityComboBox.
Установите этот атрибут, если компонент не связан с контейнером данных. В противном случае класс сущности определяется контейнером данных.
property
Задает имя атрибута сущности значение которого будет отображаться и редактироваться данным визуальным компонентом.
property всегда используется вместе с атрибутом dataContainer.
requiredMessage
Используется вместе с атрибутом required. Устанавливает сообщение, которое будет отображаться пользователю, когда компонент не имеет значения.
Атрибут может содержать само сообщение или ключ из пакета сообщений, например: requiredMessage="msg://infoTextField.requiredMessage"
step
Устанавливает интервал времени в минутах между значениями, доступными для выбора в компонентах timePicker и dateTimePicker. Значение по умолчанию 60:
tabIndex
Устанавливает 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.
title
Значение атрибута устанавливается в HTML-атрибуты title и aria-label. Большинство компонентов интерпретируют его как всплывающую подсказку.
value
Sets the value of the component. If the new value is not equal to getValue(), fires a value change event. May throw IllegalArgumentException if the value is not acceptable.
valueChangeTimeout
Применяет тайм-аут изменения значения для данного valueChangeMode.
weekNumbersVisible
Указывает, отображаются ли номера недель в всплывающем календаре. Это работает только в том случае, если первый день недели установлен на понедельник.