Rating Group
fandhe-frontend-headless-ui の rating_group mod が提供する星評価の unstyled 部品です。Root / Label / Control / Item / HiddenInput の 5 anatomy パーツを持ち、1..=count の数値評価値(未評価は None)と hover プレビューを表現する状態機械を備えます。readonly フラグにより表示専用の平均評価等も安全に描画できます。
/themes/ 側の RatingGroup(Chakra ライクな variant/size を持つスタイル層)と異なり、CSS を一切持ちません。
スタイル済みの表示例は Rating Group を参照してください。
関連 API: fandhe-frontend-headless-ui API
Demo
枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。
Rating
★★★
Features
- Root / Label / Control / Item / HiddenInput の 5 anatomy パーツと、`1..=count` の数値評価値(未評価は `None`)+ hover プレビューを持つ状態機械を提供する。
- `role="radiogroup"` + `item` の `role="radio"`/`aria-checked` で WAI-ARIA radio パターンを表現するが、ネイティブ `<input type="radio">` の組ではなく単一の `hidden_input`(`type="hidden"`)でフォーム送信値を送る。
- `hover`(ポインタが指している星)は transient な CSR 挙動のため SSR 静的マークアップには現れず、hydration でも直列化しない(常に `None` から開始)。
- `readonly` が `true` のとき値の変更操作は no-op になる(他ユーザーの平均評価等、表示専用の評価を安全に描画する用途)。
Anatomy
root
label
control
item
hidden-inputAPI Reference
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
| root(disabled) | bool | `data-disabled` を反映する。 | |
| root(readonly) | bool | `data-readonly` を反映する。 | |
| label(id) | Option<&str> | `control(labelled_by)` の参照先 id。 | |
| control(labelled_by) | Option<&str> | `Some` のときのみ `aria-labelledby` を付与する。 | |
| item(index) | u32 | 1-origin の星番号。`data-value` として動的値のまま出力する。 | |
| item(flags).checked | bool | RatingItemFlags::default() | 確定選択中(`index == value`)かどうか。`aria-checked`/`data-checked` へ反映する。 |
| item(flags).highlighted | bool | 塗り表示対象(`index <= display_value`)かどうか。`data-highlighted` へ反映する(確定選択とは独立の軸)。 | |
| item(flags).readonly | bool | `data-readonly` を反映する。 | |
| item(aria_label) | &str | 呼び出し側が必須で与える国際化可能なラベル(例: `"1 star"`)。フレームワーク側でハードコード生成しない。 | |
| hidden_input(name) | Option<&str> | `Some` のとき `name` 属性を出力する。 | |
| hidden_input(value_text) | &str | フォーム送信用の現在値 1 個(星群ではなく単一値)。 |
Data Attributes
| Part | Attribute | Observed Values |
|---|---|---|
| item | data-checked | |
| item | data-highlighted | |
| item | data-value | 1, 2, 3 |
Examples
Read-only average rating
`readonly: true` + `RatingItemFlags { readonly: true, .. }` の他ユーザー平均評価表示例。
Average rating
★★★★★
Accessibility
WAI-ARIA
| Attribute | Description |
|---|---|
| role="radiogroup" (control) | 固定付与。 |
| role="radio" / aria-checked (item) | `item` 自身が `span[role="radio"]`(ネイティブ input の組ではない)。`aria-checked` は `flags.checked` を反映する。 |
| aria-label (item) | 呼び出し側が必須で与える(例: `"1 star"`)。 |