通用属性
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"。
参阅布局规则部分的 使用示例。
colspan
设置 formLayout 表单布局 中组件能占据的列宽。
默认值:1
。
css
为 UI 组件提供声明式设置 CSS 属性的方法。
下面的示例中,通过 css
属性为 textField 组件提供了内嵌的样式,包括设置背景色、边框、内边距以及字体大小:
<textField datatype="int"
css="background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 5px;
font-size: 16px;"/>
下面的示例中,通过 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"/>
datatype
设置组件内容的 数据类型。支持:
-
boolean
-
byteArray
-
char
-
date
-
dateTime
-
decimal
-
double
-
fileRef
-
int
-
localDate
-
localDateTime
-
localTime
-
long
-
offsetDateTime
-
offsetTime
-
string
-
time
-
uri
-
uuid
当组件不关联实体属性时需要设置该参数。否则数据类型由实体属性类型决定。
metaClass
为展示实体的组件设置一个实体类,例如 dataGrid 或 entityComboBox 实体下拉框。
如果组件不与某个 数据容器 关联,则需要设置该属性。否则,实体类型由数据容器决定。
property
设置一个 实体 属性的名称,可视化组件会显示或者编辑该属性值。
property
需要与 dataContainer 属性同时使用。
step
自定义 timePicker 时间选择 和 dateTimePicker 日期时间 组件中选择时间的间隔(分钟)。默认值为 60
。
tabIndex
设置组件的 tabindex
HTML 属性。该属性控制该元素是否可以获得焦点,以及通过键盘 Tab 键进行跳转时的位置:
-
负值(通常设置
tabindex = -1
),表示组件可以获得焦点,但是不能通过键盘顺序导航访问到。 -
0,表示组件可以通过键盘顺序导航访问,但是访问顺序是按照 HTML 中 dom 的顺序定义。
-
正值,表示组件可以通过键盘顺序导航访问,并且按照该值定义的顺序进行访问。即,
tabindex = 4
的组件会在tabindex = 5
的组件之前,tabindex = 3
的组件之后。如果多个组件拥有相同的顺序值,则按照 HTML 中 dom 的顺序。
text
设置组件的文本内容。
该属性的值可以是文本本身,或者是 消息包 的一个键值。如果是消息包键值,则需要使用 msg://
前缀。
有两种方式设置键值:
-
短键值 - 此时会在当前视图的消息组中查找该键值。例如,
msg://infoField.caption
-
包含消息组的全键值,例如,
msg://com.company.sample.view.user/infoField.caption
title
该属性的值会设置到网页的 title 和 aria-label HTML 属性。大多数组件将这个作为 tooltip 使用。
valueChangeTimeout
设置给定 valueChangeMode 的超时时限。