旋鈕

旋鈕是一個表單元件，用於使用撥盤定義數字輸入。

導入 #


import Knob from 'primevue/knob';

基本 #

旋鈕使用 v-model 屬性進行雙向值綁定。


<Knob v-model="value" />

表單 #

旋鈕與 PrimeVue 表單程式庫無縫整合。


<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
    <div class="flex flex-col items-center gap-1">
        <Knob name="knob" />
        <Message v-if="$form.knob?.invalid" severity="error" size="small" variant="simple">{{ $form.knob.error?.message }}</Message>
    </div>
    <Button type="submit" severity="secondary" label="Submit" />
</Form>

最小值/最大值 #

邊界使用 min 和 max 值設定，其預設值分別為 0 和 100。


<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 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 v-model="value" disabled />

無障礙 #

螢幕閱讀器

旋鈕元素元件除了 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 個步驟。

旋鈕