numberField 数字字段
numberField 与 textField 功能相似,但仅允许输入数字类型。
XML 元素 |
|
|---|---|
Java 类 |
|
基本用法
numberField 的示例:
<numberField id="numberField" label="NumberField"/>
<numberField id="maxMinNumberField" label="With max/min" max="100" min="10"
helperText="Max value is 100, min value is 10"/>
numberField 并不会处理数字的格式。如果需要本地化的数值显示格式或使用不同的数据类型,请使用 TypedTextField。
|
数据感知的 numberField
使用 dataContainer 和 property 属性将 numberField 与一个实体属性绑定。数据容器提供实体实例,property 表示需要使用该组件编辑的属性。
下面的示例生成了一个数据感知的 numberField。对应的实体属性类型必须是数字类型。
<data>
<instance id="pointDc"
class="io.jmix.uisamples.entity.Point"
fetchPlan="_local"/>
</data>
<layout>
<numberField id="numberField" label="Field connected to a container" width="15em"
dataContainer="pointDc" property="x"/>
<hbox>
<span text="Value in the container:"/>
<span id="spanValue"/>
</hbox>
</layout>
@ViewComponent
protected InstanceContainer<Point> pointDc;
@ViewComponent
protected Span spanValue;
@Autowired
protected Metadata metadata;
@Subscribe
protected void onInit(InitEvent event) {
Point point = metadata.create(Point.class);
point.setX(31.32);
pointDc.setItem(point);
}
@Subscribe("numberField")
protected void onNumberFieldValueChange(ComponentValueChangeEvent<NumberField, Number> changeEvent) {
spanValue.setText(String.valueOf(pointDc.getItem().getX()));
}
验证
如需检查 numberField 组件输入的值,可以在内部元素 validators 中添加一个 validator元素。
numberField 可以使用下列预定义的验证器:
XML 元素 |
|
|---|---|
预定义验证器 |
custom - doubleMax - doubleMin - negative - negativeOrZero - notNull - positive - positiveOrZero |
样式版本
使用 themeNames 属性配置一个或多个样式。
| 样式 | 描述 | 支持的主题 |
|---|---|---|
|
组件尺寸较小 |
Aura, Lumo |
|
字段值左对齐 |
Aura, Lumo |
|
字段值居中 |
Aura, Lumo |
|
字段值右对齐 |
Aura, Lumo |
|
帮助文字显示在字段上方,标题下方。 |
Aura, Lumo |
XML 属性
下面是 numberField 的特殊属性:
| 名称 | 描述 | 默认值 |
|---|---|---|
当组件获得焦点时,是否自动选中组件的文本。 |
— |
|
组件是否显示一个清除按钮。 |
|
|
设置最大值。 |
— |
|
设置最小值。 |
— |
|
设置步长。 |
— |
|
设置是否显示调整步长的按钮。 |
— |
|
设置组件值。 |
— |
下面是 numberField 支持的其他通用属性:
id - alignSelf - allowedCharPattern - 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 - themeNames - title - valueChangeMode - valueChangeTimeout - visible - width