レーティングRatingExperimental
Read-only star rating display with half-star support, optional numeric value and review count, for product, review, and feedback summaries.
プレビュー
状態とバリエーション
Rating は読み取り専用の表示で、星は装飾です。意味は role="img" に付いた1本の名前だけが担うので、星の数（max）を変えたときも、評価がまだ無いときも、その名前が正しいかどうかが要になります。名前は label で差し替えます。
5段階以外の目盛り
max は星の本数を決めます。10段階の満足度や3段階の難易度のように、5でない目盛りをそのまま出せます。value は半分単位に丸められるので、7.5 は星7つ半になります。
読み上げの名前を差し替える
label を渡さないときの名前は英語の "4.5 out of 5 stars" です。日本語の画面ではここが英語のまま残るので、label で書き換えます。画面の見た目は変わらず、読み上げだけが変わります。
評価がまだ無いとき
件数が0のときに value=0 をそのまま出すと、星が全部空の「最低評価」に見えます。0件は評価ではないので、星の横に文字を添え、label もその文字に合わせます。
レビューはまだありません
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| value | number | - | Current rating (e.g. 4.5). Rounded to the nearest half-star. |
| max | number | 5 | Maximum number of stars. |
| size | "sm" | "default" | "lg" | "default" | Star size. |
| reviewCount | number | - | Optional review count rendered after the stars. |
| showValue | boolean | - | Render the numeric value before the stars. |
| label | string | - | Override the accessible label (default "{value} out of {max} stars"). |
| className | string | - | Additional CSS class names. |
Usage
import { Rating } from "@gunjo/ui"
export function Example() {
return <Rating value={4.5} reviewCount={128} showValue />
}