ノブ

ノブは、ダイヤル付きの数値入力を定義するためのフォームコンポーネントです。

インポート#


import { Knob } from 'primereact/knob';

基本#

ノブは、_value_ プロパティと _onChange_ プロパティを使用して制御される入力として使用されます。


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

最小/最大#

境界は、デフォルトがそれぞれ0と100である _min_ プロパティと _max_ プロパティで設定されます。


<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ステップ減らします。