旋钮

旋钮是一个表单组件，用于通过拨号定义数字输入。

导入#


import { Knob } from 'primereact/knob';

基础#

旋钮用作具有value和onChange属性的受控输入。


<Knob value={value} onChange={(e) => setValue(e.value)} />

最小值/最大值#

边界通过min和max属性配置，它们的默认值分别为 0 和 100。


<Knob value={value} onChange={(e) => setValue(e.value)} min={-50} max={50} />

步长#

每次移动的大小由 step 属性定义。


<Knob value={value} step={10} onChange={(e) => setValue(e.value)} />

模板#

标签是一个字符串模板，可以使用具有 60 作为占位符的 valueTemplate 属性进行自定义。


<Knob value={value} onChange={(e) => setValue(e.value)} valueTemplate={'{value}%'} />

描边#

边框大小使用 stroke 属性指定，以像素为单位的数字。


<Knob value={value} onChange={(e) => setValue(e.value)} strokeWidth={5} />

大小#

旋钮的直径使用 size 属性以像素为单位定义。


<Knob value={value} onChange={(e) => setValue(e.value)} size={200} />

颜色#

颜色使用 textColor、rangeColor 和 valueColor 属性进行自定义。


<Knob value={value} onChange={(e) => setValue(e.value)} valueColor="#708090" rangeColor="#48d1cc" />

响应式#

旋钮也可以使用自定义控件进行控制。


<Knob value={value} size={150} />
<Button icon="pi pi-plus" onClick={() => setValue(value + 1)} disabled={value === 100} />
<Button icon="pi pi-minus" onClick={() => setValue(value - 1)} disabled={value === 0} />

只读#

当存在readOnly时，该值无法编辑。


<Knob value={50} readOnly />

禁用#

当存在disabled时，会应用视觉提示以指示无法与旋钮进行交互。


<Knob value={50} disabled />

可访问性#

屏幕阅读器

旋钮元素组件除了aria-valuemin、aria-valuemax和aria-valuenow属性外，还使用slider角色。可以使用aria-labelledby和aria-label属性定义描述组件的值。


<label htmlFor="firstname">Firstname</label>
<InputText id="firstname" />

<span id="lastname">Lastname</span>
<InputText aria-labelledby="lastname" />

<InputText aria-label="Age"/>

键盘支持

按键	功能
tab	将焦点移至滑块。
左箭头下箭头	减小该值。
右箭头上箭头	增加该值。
home	设置最小值。
end	设置最大值。
page up	将值增加 10 步。
page down	将值减少 10 步。