Skip to content
fandhe-frontend
GitHub

Rating Group

fandhe-frontend-headless-uirating_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-input

API Reference

Arguments

NameTypeDefaultDescription
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)u321-origin の星番号。`data-value` として動的値のまま出力する。
item(flags).checkedboolRatingItemFlags::default()確定選択中(`index == value`)かどうか。`aria-checked`/`data-checked` へ反映する。
item(flags).highlightedbool塗り表示対象(`index <= display_value`)かどうか。`data-highlighted` へ反映する(確定選択とは独立の軸)。
item(flags).readonlybool`data-readonly` を反映する。
item(aria_label)&str呼び出し側が必須で与える国際化可能なラベル(例: `"1 star"`)。フレームワーク側でハードコード生成しない。
hidden_input(name)Option<&str>`Some` のとき `name` 属性を出力する。
hidden_input(value_text)&strフォーム送信用の現在値 1 個(星群ではなく単一値)。

Data Attributes

PartAttributeObserved Values
itemdata-checked
itemdata-highlighted
itemdata-value1, 2, 3

Examples

Read-only average rating

`readonly: true` + `RatingItemFlags { readonly: true, .. }` の他ユーザー平均評価表示例。

Average rating

Accessibility

WAI-ARIA

AttributeDescription
role="radiogroup" (control)固定付与。
role="radio" / aria-checked (item)`item` 自身が `span[role="radio"]`(ネイティブ input の組ではない)。`aria-checked` は `flags.checked` を反映する。
aria-label (item)呼び出し側が必須で与える(例: `"1 star"`)。