Vue Rating コンポーネント

インポート #


import Rating from 'primevue/rating';

基本 #

双方向値バインディングは、v-modelを使用して定義されます。


<Rating v-model="value" />

星の #

表示する星の数は、*stars*プロパティで定義されます。


<Rating v-model="value" :stars="10" />

テンプレート #

カスタムアイコンは、*onicon*、*officon*、および*cancelicon*スロットを使用してデフォルトのアイコンをオーバーライドするために使用されます。


<Rating v-model="value">
    <template #cancelicon>
        <img src="/images/rating/cancel.png" height="24" width="24" />
    </template>
    <template #onicon>
        <img src="/images/rating/custom-onicon.png" height="24" width="24" />
    </template>
    <template #officon>
        <img src="/images/rating/custom-officon.png" height="24" width="24" />
    </template>
</Rating>

読み取り専用 #

*readOnly*が存在する場合、値を編集できません。


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

無効 #

*disabled*が存在する場合、ノブを操作できないことを示す視覚的なヒントが適用されます。


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

アクセシビリティ #

スクリーンリーダー

レーティングコンポーネントは、スクリーンリーダーにのみ表示されるラジオボタンを内部で使用します。アイテムの読み取り値は、*aria*プロパティの*star*と*stars*を介してロケールAPIから取得されます。

キーボードサポート

キーボードの操作は、グループ内のラジオボタンのネイティブブラウザ処理から派生しています。

キー	機能
タブ	値を表す星にフォーカスを移動します。存在しない場合は、最初の星にフォーカスが移動します。
左矢印上矢印	前の星にフォーカスを移動します。存在しない場合は、最後のラジオボタンにフォーカスが移動します。
右矢印下矢印	次の星にフォーカスを移動します。存在しない場合は、最初の星にフォーカスが移動します。
スペース	フォーカスのある星が値を表していない場合、値を星の値に変更します。

レーティング