Ratings
fandhe-frontend-wireframe-ui の星評価風プレースホルダーです。星 5 個のうち塗った個数だけを視覚的に示す非インタラクティブな部品です。API は ratings(rating, size) の 2 引数(詳細は下の引数表を参照)で、props 構造体は導入していません。
視覚的な参照元は blocks.pm の Ratings 部品ですが、ライセンス上の理由によりスクリーンショットは掲載していません(詳細は docs/design/wireframe-ui-architecture.md §2)。参照したい場合は外部リンク先を直接確認してください。
星は塗り/線画の 2 状態のみを示す表示専用プレースホルダーで、<input type="radio"> 群・role="radiogroup"・ポインタ操作・キーボード操作のいずれも実装しません。実際に操作できる評価入力が必要な場合は Rating group(Themes) / Rating group(Primitives) を検討してください。
Demo
既定(4/5)
0/5
5/5
クランプ例(rating = 9 は 5/5 として表示)
Sm
Lg
引数表
| 引数 | 型 | 既定値 | 説明 |
|---|---|---|---|
| rating | u8 | - | 塗る星の数。5 超は 5 へクランプする。 |
| size | Size | Size::Md | サイズ段階(xs〜xl)。 |
原案差分メモ
- API は独自設計:
docs/design/wireframe-ui-architecture.md§2 の保留(イシュー #2602)に従い、blocks.pm の Figma プロパティ構成(Size・Rating・星ごと bool 等)を参照・書き写さず、同文書 §6 の汎用変換規約(「星評価はrating: u8の 1 引数へ畳む」)から独立に設計しました。 - 星の総数は 5 固定でクランプする:
rating: u8は星の総数(STAR_COUNT = 5)を超える値を 5 へクランプします。星の総数を変える引数(max)は追加していません。 icon::starを再利用する: 星のジオメトリは新規に描かず、既存の SVG アイコン基盤(crate::icon::star)をそのまま再利用します(docs/design/wireframe-ui-architecture.md§11.4 のスロット規約・§2「ジオメトリの出自」の方針)。- 塗り状態は共通型
Activeへ畳み込む: 専用の状態型は追加せず、先頭からrating(クランプ後)個の星へActive(true)を渡しdata-active=""を付与します(Select/Radio/Switch/Checkboxに続く「チェック済み」相当の意味での再利用)。 - 評価値は
data-*へ出力しない:data-rating/data-valueのような評価値そのものを表すdata-*属性は一切出力しません(sliderの「値はdata-*へ出さない」判断と同じ、docs/design/wireframe-ui-architecture.md§5「表示状態を示すdata-*まで」の責務境界)。 role="img"/aria-labelは付けない: ルートへ意味論を追加する属性は付与しません(icon部品(イシュー #2652)との継ぎ目を侵さないための判断)。&str引数を持たないため XSS 回帰は構造的に充足: 動的入力はu8とSizeのみで文字列が HTML へ流れる経路が存在しないため、テキスト引数の既定エスケープ回帰テストは対象外です(crates/wireframe-ui/tests/ratings.rs冒頭コメント参照)。- スクリーンショット非掲載:
docs/design/reference-screenshots/への blocks.pm 画像取り込みは #2602 で fail-closed に非掲載と確定しています。本ページも画像は置かず、上記の外部リンクのみで代替します。 - 配色はグレースケール: 塗り済みの星は
--fw-wire-ink、未塗りの星は--fw-wire-lineトークンで表現し、ColorPaletteには依存しません。