decimalSlider 浮点滑动输入

Jmix 3.1+

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

如需处理 Integer 值，请使用 integerSlider。如需选择值的范围，请使用 decimalRangeSlider。

XML 元素

decimalSlider

Java 类

JmixDecimalSlider

基本用法

在线示例

默认情况下，滑块取值范围为 0 到 100，步长为 1。将 step 设置为小数即可让用户选择小数值。

以下是一个 decimalSlider 示例，取值范围为 0 到 1，步长为 0.1：

<decimalSlider id="decimalSlider" label="DecimalSlider" width="20em"
               min="0" max="1" step="0.1" value="0.5"
               valueAlwaysVisible="true"
               helperText="The value bubble is always visible"/>

数据感知的 decimalSlider

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

如需将 decimalSlider 与实体属性绑定，请设置 dataContainer 和 property 属性。实体属性必须是 Double 类型。

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

空值

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

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

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

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

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

范围和步长

Vaadin

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

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

值显示

在线示例

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

minMaxVisible 属性会在轨道下方显示 min 和 max 值。

验证

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

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

XML 元素

validators

预定义验证器

custom - doubleMax - doubleMin - negative - negativeOrZero - notNull - positive - positiveOrZero

XML 属性

下面是 decimalSlider 的特殊属性：

名称 描述 默认值

max

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

100

min

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

0

minMaxVisible

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

false

step

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

1

value

设置组件值。

—

valueAlwaysVisible

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

false

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

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

事件和处理器

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

名称 描述

validator

验证组件值。

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

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

XML 内部元素

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

参考