integerField 整数字段

integerField 与 textField 功能相似，但仅允许输入 Integer 类型。

XML 元素

integerField

Java 类

JmixIntegerField

基本用法

在线示例

integerField 组件可用于输入和展示整数值。

integerField 的示例：

<integerField id="integerField" label="IntegerField"/>
integerField 并不会处理数字的格式。如果需要本地化的数值显示格式或使用不同的数据类型，请使用 TypedTextField。

数据感知的 integerField

在线示例

数据绑定是指将组件与 数据容器 进行关联。可视化组件或相应数据容器中的更改可以触发彼此的更新。有关详细信息，请参阅 使用数据组件。

下面的示例生成了一个数据感知的 integerField。对应的实体属性类型必须是 Integer。

<data>
    <instance id="customerDc"
              class="io.jmix.uisamples.entity.Customer"
              fetchPlan="_local"/>
</data>
<layout>
    <integerField id="integerField" label="Field connected to a container" width="15em"
                     dataContainer="customerDc" property="age"/>
    <hbox>
        <span text="Value in the container:"/>
        <span id="spanValue"/>
    </hbox>
</layout>

customerDc 实例容器加载了一个 Customer 实体。dataContainer 和 property 将组件与 age 属性绑定。

步长

Vaadin

step（步长）属性用于控制用户使用向上/向下箭头（也称为步长按钮）交互时的增减值。步长决定每次交互时值的变化量。可以用来定义 integerField 的精度级别。

step 属性通常与 min 和 max 属性结合使用，以定义数字的有效范围。

stepButtonsVisible 属性控制是否显示步长按钮。

<integerField step="1"
              stepButtonsVisible="true"
              min="1"
              max="10"
              helperText="Max 10 items"/>

验证

如需检查 integerField 组件输入的值，可以在内部元素 validators 中添加一个 validator元素。

integerField 可以使用下列预定义的验证器：

XML 元素

validators

预定义验证器

custom - digits - max - min - negativeOrZero - negative - notNull - positiveOrZero - positive

样式版本

在线示例

使用 themeNames 属性配置一个或多个样式。

样式 描述 支持的主题

small

组件尺寸较小

Aura, Lumo

align-left

字段值左对齐

Aura, Lumo

align-center

字段值居中

Aura, Lumo

align-right

字段值右对齐

Aura, Lumo

helper-above-field

帮助文字显示在字段上方，标题下方。

Aura, Lumo

XML 属性

下面是 integerField 的特殊属性：

名称 描述 默认值

autoselect

当组件获得焦点时，是否自动选中文本。

—

clearButtonVisible

设置组件是否显示一个清除按钮。

false

max

指定允许输入的最大值。大于 max 的值会导致验证失败。

—

min

指定允许输入的最小值。小于 min 的值会导致验证失败。

—

step

设置控件的值变化量。设置当点击增加/减少按钮时，数字变化的步长。参阅 步长。

1

stepButtonsVisible

设置步长按钮的可见性。参阅 步长。

false

themeNames

为组件设置主题样式。

—

value

设置组件的值。

—

下面是 integerField 支持的其他通用属性：

id - alignSelf - ariaLabel - ariaLabelledBy - autocapitalize - autocomplete - autocorrect - autofocus - classNames - colspan - css - dataContainer - enabled - errorMessage - focusShortcut - height - helperText - label - maxHeight - maxWidth - minHeight - minWidth - placeholder - property - readOnly - required - requiredMessage - tabIndex - title - valueChangeMode - valueChangeTimeout - visible - width

事件和处理器

下面是 integerField 的特殊事件和处理器：

名称 描述

validator

验证组件的值。

下面是 integerField 支持的其他通用事件：

AttachEvent - BlurEvent - ClientValidatedEvent - ComponentValueChangeEvent - CompositionEndEvent - CompositionStartEvent - CompositionUpdateEvent - DetachEvent - FocusEvent - InputEvent - KeyDownEvent - KeyPressEvent - KeyUpEvent - statusChangeHandler

XML 内部元素

一个 integerField 可以包含 prefix、suffix、tooltip 和 validator 作为其内部元素。

参考