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 によるインライン表現です。
Size
Features
size/colorPalettevariant クラスを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 |
|---|---|---|
control | data-disabled | （値なし） |
control | data-readonly | （値なし） |
hidden-input | data-disabled | （値なし） |
item | data-checked | （値なし） |
item | data-disabled | （値なし） |
item | data-highlighted | （値なし） |
item | data-readonly | （値なし） |
item | data-value | 1, 2, 3, 4, 5 |
label | data-disabled | （値なし） |
root | data-disabled | （値なし） |
root | data-readonly | （値なし） |
CSS Variables
| Variable | Default |
|---|---|
--fandhe-rating-group-font-size | var(--fandhe-font-font-size-sm) |
--fandhe-rating-group-item-size | 1.25rem |