Knob

Knobは、ダイヤルを使用して数値入力を定義するためのフォームコンポーネントです。

インポート #


import Knob from 'primevue/knob';

基本 #

Knobは入力コンポーネントであり、標準のv-modelディレクティブと共に使用されます。


<Knob v-model="value" />

最小値/最大値 #

境界は、デフォルトがそれぞれ0と100であるminとmaxの値で設定されます。


<Knob v-model="value" :min="-50" :max="50" />

ステップ #

ステップ係数はデフォルトで1であり、stepオプションでカスタマイズできます。


<Knob v-model="value5" :step="10" />

テンプレート #

ラベルは、テンプレート文字列または関数を使用してvalueTemplateプロパティでカスタマイズできます。


<Knob v-model="value" valueTemplate="{value}%" />

ストローク #

ボーダーサイズは、ピクセル単位の数値としてstrokeプロパティで指定されます。


<Knob v-model="value" :strokeWidth="5" />

サイズ #

ノブの直径は、sizeプロパティを使用してピクセル単位で定義されます。


<Knob v-model="value" :size="200" />

カラー #

valueColorは値の色を、rangeColorは範囲の背景を、同様にtextColorは値テキストの色を設定します。さらに、strokeWidthは範囲と値セクションのストロークの幅を決定するために使用されます。


<Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />

リアクティブ #

Knobは、カスタムコントロールでも制御できます。


<Knob v-model="value" :size="150" readonly />
<div class="flex gap-2">
    <Button icon="pi pi-plus" @click="value++" :disabled="value >= 100" />
    <Button icon="pi pi-minus" @click="value--" :disabled="value <= 0" />
</div>

読み取り専用 #

readonlyが存在する場合、値は編集できません。


<Knob v-model="value" readonly />

無効 #

disabledが存在する場合、Knobとインタラクトできないことを示す視覚的なヒントが適用されます。


<Knob v-model="value" disabled />

アクセシビリティ #

スクリーンリーダー

Knob要素コンポーネントは、aria-valuemin、aria-valuemax、aria-valuenow属性に加えて、sliderロールを使用します。コンポーネントの説明値は、aria-labelledbyとaria-labelプロップを使用して定義できます。


<span id="label_number">Number</span>
<Knob aria-labelledby="label_number" />

<Knob aria-label="Number" />

キーボードサポート

キー	機能
tab	スライダーにフォーカスを移動します。
左矢印下矢印	値を減らします。
右矢印上矢印	値を増やします。
home	最小値を設定します。
end	最大値を設定します。
page up	値を10ステップ増やします。
page down	値を10ステップ減らします。