范围

QRange组件是一种向用户提供选择最小值和最大值之间的子范围值的好方法,并带有可选的步骤来选择这些值。 范围组件的示例用例是提供价格范围选择。

也检阅其“兄弟”,即QSlider组件。

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

用法

请注意,我们正在使用一个对象进行选择,该对象同时包含所选范围的较低值-rangeValues.min和较高值-rangeValues.max的值。

标准

Standard

垂直

Vertical orientation

带步数

With Step

step属性也可以是浮点数(如果需要无限精度,也可以是数字0)。

Floating point
Snaps to steps

带标签

在下面的示例中,移动滑块以查看标签。

With label
Always display label
Custom label values

下面的示例更好地强调了QRange如何处理标签定位,以便它始终水平地保持在QRange的框内。

Long label

里程碑

Markers

拖动范围

drag-rangedrag-only-range属性允许用户移动所选范围或整体上仅移动预定范围。

Drag range
Drag range + snap to step
Drag only range (fixed interval)

延迟输入

Lazy input

空值

Null values

反转

In reverse

暗色、只读、禁用

Dark
Readonly
Disable

使用QItem

With QItem

变得有创意

使用简单的CSS你可以得到很好的效果。

Getting creative

本地表单提交

当处理具有actionmethod的原生形式时(例如,使用Quasar和ASP.NET控制器),则需要在QRange上指定name属性,否则formData将不包含它(如果应该的话):

Native form

QRange API

Loading API...
Please wait...