QKnob 组件用于通过鼠标/触摸平移接收用户的数字输入。它基于 QCircularProgress 并继承了其所有属性和行为。
¥The QKnob component is used to take a number input from the user through mouse/touch panning. It is based on QCircularProgress and inherits all its properties and behavior.
用法(Usage)
¥Usage
默认情况下,QKnob 继承当前文本颜色(作为弧形进度颜色和内部标签颜色)和当前字体大小(作为组件大小)。为了进行自定义,你可以使用与尺寸和颜色相关的属性。
¥By default, QKnob inherits current text color (as arc progress color and inner label color) and current font size (as component size). For customization, you can use the size and color related props.
基本(Basic)
¥Basic
显示价值(Show value)
¥Show value
在下面的示例中,show-value
属性还启用了默认插槽,因此你可以用自定义内容(例如 QAvatar 或 QTooltip)填充它。font-size
属性引用内部标签的字体大小。
¥In the example below, show-value
property also enables the default slot, so you can fill it with custom content, like even a QAvatar or a QTooltip. The font-size
prop refers to the inner label font size.
如果默认插槽包含图片,则必须使用 no-pointer-events
类设置其样式,或将 draggable
属性设置为 false。否则,浏览器的默认图片拖动行为将覆盖 QKnob 的行为。
¥If the default slot contains an image, you have to style it with class no-pointer-events
or set the draggable
prop to false. Otherwise browser’s default image dragging behaviour overrides QKnob’s one
最小和最大(Min and max)
¥Min and max
内部最小/最大 v2.5.4+(Inner min/max v2.5.4+)
¥Inner min/max
有时你需要将模型值限制在轨道长度内的某个区间内。为此,请使用 inner-min
和 inner-max
属性。第一个 prop 需要大于或等于 min
prop,而后者需要小于或等于 max
prop。
¥Sometimes you need to restrict the model value to an interval inside of the track’s length. For this purpose, use inner-min
and inner-max
props. First prop needs to be higher or equal to min
prop while the latter needs to be lower or equal to the max
prop.
自定义步长(Custom step)
¥Custom step
偏移角度(Offset angle)
¥Offset angle
禁用并只读(Disable and readonly)
¥Disable and readonly
原生表单提交(Native form submit)
¥Native form submit
处理具有 action
和 method
的原生表单时(例如,将 Quasar 与 ASP.NET 控制器一起使用时),你需要在 QKnob 上指定 name
属性,否则 formData 将不会包含它(如果应该包含的话):
¥When dealing with a native form which has an action
and a method
(eg. when using Quasar with ASP.NET controllers), you need to specify the name
property on QKnob, otherwise formData will not contain it (if it should):