API 浏览器
旋钮

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.

Loading QKnob API...

用法(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

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

Show value



最小和最大(Min and max)

¥Min and max

Custom min/max



内部最小/最大
v2.5.4+
(Inner min/max
v2.5.4+
)

¥Inner min/max

v2.5.4+

有时你需要将模型值限制在轨道长度内的某个区间内。为此,请使用 inner-mininner-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.

Inner min/max



自定义步长(Custom step)

¥Custom step

Custom step



偏移角度(Offset angle)

¥Offset angle

Offset angle



禁用并只读(Disable and readonly)

¥Disable and readonly

Disable and readonly



原生表单提交(Native form submit)

¥Native form submit

处理具有 actionmethod 的原生表单时(例如,将 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):

Native form