Rating Group
fandhe-frontend-pre-styled-ui の rating_group mod が提供するスタイル済み Rating Group 部品です。
関連 API: fandhe-frontend-pre-styled-ui API / fandhe-frontend-headless-ui API
Demo
1..=count の星評価。data-highlighted が塗り表示（hover プレビュー優先）、data-checked が確定選択を表します。星形は SVG/画像 URL を使わない clip-path によるインライン表現です。
Features
- `size`/`colorPalette` variant クラスを `root` へ付与し、headless-ui の `rating_group::root` へ委譲する。
- `readonly` フラグを持つ（`radio_group` 等と異なり読み取り専用表示を単独でサポート）。
Anatomy
root
label
control
item
hidden-inputAPI Reference
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
| size | Size | Size::Md | サイズ variant。 |
| palette | ColorPalette | ColorPalette::Accent | colorPalette 軸。 |
| disabled | bool | false | 無効化状態。 |
| readonly | bool | false | 読み取り専用状態。 |
| attrs | Vec<(&str, &str)> | root パーツへ合成する追加属性。 | |
| children | Vec<Node> | root 配下の子ノード（通常アイテム列）。 |
Data Attributes
| Part | Attribute | Observed Values |
|---|---|---|
| hidden-input | data-disabled | |
| item | data-checked | |
| item | data-disabled | |
| item | data-highlighted | |
| item | data-readonly | |
| item | data-value | 1, 2, 3, 4, 5 |
| root | data-disabled | |
| root | data-readonly |
CSS Variables
| Variable | Default |
|---|---|
| --fandhe-rating-group-item-size | 1.25rem |