通用属性

allowedCharPattern

设置客户端侧用于检查用户输入格式的正则表达式。设置的模式内容必须是合法的 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

设置 autocapitalize HTML 属性。定义是否自动将用户输入的文字转换成大写。

autocomplete

MDN

设置 autocomplete HTML 属性。定义该组件的值是否可由浏览器自动填充。

autocorrect

MDN

设置字段的 autocorrect HTML 属性。

仅支持 Safari。

autofocus

指定该组件在页面加载后即获得输入焦点。

属性值可以是 truefalse。默认情况下,没有组件自动获得焦点。

classNames

为组件添加 CSS 类名。

clearButtonVisible

设置是否显示控件的清除按钮。

clickShortcut

定义触发组件点击事件的键盘快捷键。组件必须有处理点击事件的相应方法,否则快捷键不会有任何效果。

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"/>

dataContainer

在视图 XML 描述的 data 部分设置一个数据容器。

当设置 dataContainer 为某个 单一实例容器 时,需要同时设置 property 属性。

datatype

设置组件内容的 数据类型。支持:

  • boolean

  • byteArray

  • char

  • date

  • dateTime

  • decimal

  • double

  • fileRef

  • int

  • localDate

  • localDateTime

  • localTime

  • long

  • offsetDateTime

  • offsetTime

  • string

  • time

  • uri

  • uuid

当组件不关联实体属性时需要设置该参数。否则数据类型由实体属性类型决定。

dateFormat

为组件支持的日期值设置格式偏好。默认情况下,使用当前 locale 的日期格式。

enabled

显式设置组件是否启用。

errorMessage

设置组件的错误消息。

flexGrow

MDN

设置此组件的 flex grow。设置为 0 时,组件宽度固定。

focusShortcut

定义组件获得焦点的键盘快捷键。

height

设置组件的高度。

高度值需要使用浏览器支持的值,例如,"100px""2.5em"

helperText

设置组件的说明信息,例如,可以告诉用户该组件支持什么类型的值。

id

组件的标识符。

推荐根据 Java 标识符规则创建组件标识符,使用驼峰命名法,例如:userGridfilterPanel。任何组件都可以指定 id 属性,要求在同一视图内唯一。

invalid

根据字段验证的结果设置字段的无效状态。

  • 如果 invalid=false 无论验证结果如何,该字段有效。

  • 如果 invalid=true 且验证通过时,该字段有效。

label

设置组件的标签。

该属性的值可以是一个纯文本,或 消息包 中的一个键值。如果是键值,需要以 msg:// 开头。

maxHeight

MDN

设置组件的 max-height CSS 属性。高度值需要使用浏览器支持的值,例如,"100px""2.5em"

maxLength

MDN

设置字段型组件允许输入的最大字符数。

maxWidth

MDN

设置组件的 max-width CSS 属性。宽度值需要使用浏览器支持的值,例如,"100px""2.5em"

metaClass

为展示实体的组件设置一个实体类,例如 dataGridentityComboBox 实体下拉框

如果组件不与某个 数据容器 关联,则需要设置该属性。否则,实体类型由数据容器决定。

minHeight

MDN

设置组件的 min-height CSS 属性。高度值需要使用浏览器支持的值,例如,"100px""2.5em"

minLength

MDN

设置字段型组件允许输入的最小字符数。

minWidth

MDN

设置组件的 min-width CSS 属性。宽度值需要使用浏览器支持的值,例如,"100px""2.5em"

overlayClass

设置在 overlay 元素上的 CSS 类名列表。

pattern

MDN

客户端输入时,设置一个输入值需要符合的正则表达式。表达式必须是有效的 JavaScript 正则表达式,用于匹配整个值,而非部分值。

placeholder

占位符。用来提示用户组件中可以输入什么内容。

property

设置一个 实体 属性的名称,可视化组件会显示或者编辑该属性值。

property 需要与 dataContainer 属性同时使用。

readOnly

设置组件是否是只读模式。

required

表示该控件为必填项。

使用 jmix.ui.component.immediate-required-validation-enabled 应用程序属性控制必填字段的高亮时机。

requiredIndicatorVisible

设置是否显示必填指示符。

requiredMessage

required 属性同时使用。当组件没有值时,则展示该消息。

属性值可以是一个消息本身,或者 消息包 中的键值,示例:requiredMessage="msg://infoTextField.requiredMessage"

step

自定义 timePicker 时间选择dateTimePicker 日期时间 组件中选择时间的间隔(分钟)。默认值为 60

tabIndex

MDN

设置组件的 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

themeNames

为组件添加一个主题。

title

该属性的值会设置到网页的 titlearia-label HTML 属性。大多数组件将这个作为 tooltip 使用。

value

设置组件的值。如果新值与 getValue() 的值不同,则触发值变更事件。如果值非法,则抛出 IllegalArgumentException

valueChangeMode

为组件设置一个新的值修改模式(Value change mode)。

valueChangeTimeout

设置给定 valueChangeMode 的超时时限。

visible

设置组件的可见性。

weekNumbersVisible

设置日历的弹窗中是否显示第几周的信息。仅当设置星期一为每周开始时有效。

whiteSpace

MDN

设置 white-space CSS 属性值。

默认值:NORMAL

width

设置组件宽度。宽度值需要使用浏览器支持的值,例如,"100px""2.5em"