integerSlider 整数滑动输入

Jmix 3.1+

integerSlider 支持用户沿轨道拖动手柄选择 Integer 值。用户也可以使用方向键移动手柄。

如需处理 Double 值，请使用 decimalSlider。如需选择值的范围，请使用 integerRangeSlider。

XML 元素

integerSlider

Java 类

JmixIntegerSlider

基本用法

在线示例

默认情况下，滑块取值范围为 0 到 100，步长为 1。一个 integerSlider 的示例：

<integerSlider id="integerSlider" label="IntegerSlider" width="20em" value="50"/>

数据感知的 integerSlider

在线示例

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

下面是一个数据感知的 integerSlider 示例。实体属性必须是 Integer 类型。

<data>
    <instance id="customerDc"
              class="io.jmix.uisamples.entity.Customer"
              fetchPlan="_local"/>
</data>
<layout>
    <integerSlider id="ageSlider" label="Slider connected to a container" width="20em"
                   min="0" max="100" step="1"
                   minMaxVisible="true"
                   dataContainer="customerDc" property="age"/>
</layout>

customerDc 实例容器包含 Customer 实体。dataContainer 和 property 属性将组件与 age 实体属性绑定。

当用户松开手柄时，滑块会向服务端发送新值。如需在拖动的每一步都发送值，请将 valueChangeMode 设置为 EAGER。

空值

滑块无法显示空值。当没有值时，会改为显示 min 值。滑块将其视为空值：

  • 如果绑定的属性为 null，滑块会显示 min，但不会将其写入实体，DataContext 也不会注册更改。只有当用户移动手柄或在代码中设置值时，该属性才会获得值。

  • 未绑定的滑块在用户移动手柄或在代码中设置值之前为空。

  • 调用 clear() 或 setValue(null) 会将手柄移动到 min 并使滑块的值为空。与实体绑定的滑块还会将属性设置为 null。

isEmpty() 方法对空滑块返回 true，但此时 getValue() 返回 min。验证器获取到的空滑块值为 null。如果滑块是 required，则空滑块无法通过验证。

范围和步长

在线示例

min 和 max 属性设置值的范围，step 设置值之间的间隔。用户可以选择的值从 min 开始计算：min、min + step、min + 2 * step，依此类推。

<integerSlider id="stepSlider" label="With min, max and step" width="20em"
               min="0" max="50" step="5" value="20"
               minMaxVisible="true"
               helperText="Values from 0 to 50 with a step of 5"/>

滑块不会更改超出范围的值。此类值可能来自绑定的属性或代码。滑块会使用 min 和 max 验证器检查该值，如超出范围，则显示验证错误。这些验证器是自动添加的，并在更改 min 或 max 时更新。

值显示

Vaadin

默认情况下，滑块仅在用户与其交互时在手柄上方显示当前值。将 valueAlwaysVisible 设置为 true 可始终显示值。

minMaxVisible 属性会在轨道下方显示 min 和 max 值，例如 上面的示例。

验证

如需检查 integerSlider 的值，可以在内部的 validators 元素中使用 验证器。每次值更改时都会运行验证器。

integerSlider 可使用以下预定义验证器：

XML 元素

validators

预定义验证器

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

XML 属性

下面是 integerSlider 的特殊属性：

名称 描述 默认值

max

设置滑块的最大值。大于 max 的值会使组件无效。参考 范围和步长。

100

min

设置滑块的最小值。小于 min 的值会使组件无效。空滑块显示该值。参考 空值。

0

minMaxVisible

在轨道下方显示 min 和 max 值。

false

step

设置用户可选值之间的间隔。步长必须大于 0。参考 范围和步长。

1

value

设置组件值。

—

valueAlwaysVisible

始终在手柄上方显示当前值。如果为 false，则仅在用户与滑块交互时显示值。

false

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

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

事件和处理器

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

名称 描述

validator

验证组件值。

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

AttachEvent - BlurEvent - ComponentValueChangeEvent - DetachEvent - FocusEvent - KeyDownEvent - KeyPressEvent - KeyUpEvent - statusChangeHandler

XML 内部元素

一个 integerSlider 可以包含 tooltip 和 validators 作为其内部元素。

参考