レーティング

レーティングコンポーネントは、星に基づいた選択入力です。

インポート#


import { Rating } from 'primereact/rating';
         

基本#

レーティングは、value プロパティと onChange プロパティを持つ制御された入力コンポーネントとして使用されます。


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

キャンセルなし#

デフォルトでは、値をリセットするためのキャンセルアイコンが表示されます。このオプションを削除するには、cancel を false に設定します。


<Rating value={value} onChange={(e) => setValue(e.value)} cancel={false} />
         

星の数#

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


<Rating value={value} onChange={(e) => setValue(e.value)} stars={10} />
         

テンプレート#

カスタムアイコンを使用して、onIcon、offIcon、cancelIcon プロパティでデフォルトのアイコンをオーバーライドします。

custom-cancel-image
custom-image
custom-image
custom-image
custom-image
custom-image

<Rating value={value} onChange={(e) => setValue(e.value)}
    cancelIcon={<img src="/images/rating/cancel.png" alt="custom-cancel-image" width="25px" height="25px" />}
    onIcon={<img src="/images/rating/custom-icon-active.png" alt="custom-image-active" width="25px" height="25px" />}
    offIcon={<img src="/images/rating/custom-icon.png" alt="custom-image" width="25px" height="25px" />}
/>
 

読み取り専用#

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


<Rating value={5} readOnly cancel={false} />
         

無効#

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


<Rating value={5} disabled cancel={false} />
         

アクセシビリティ#

スクリーンリーダー

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

キーボードサポート

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

キー機能
tab値を表す星にフォーカスを移動します。値がない場合は、最初の星にフォーカスが移動します。
左矢印上矢印前の星にフォーカスを移動します。値がない場合は、最後のラジオボタンにフォーカスが移動します。
右矢印下矢印次の星にフォーカスを移動します。値がない場合は、最初の星にフォーカスが移動します。
spaceフォーカスされている星が値を表していない場合、値を星の値に変更します。
                  PrimeReact 10.8.3 by PrimeTek