Segment Group
fandhe-frontend-pre-styled-ui の segment_group mod が提供するスタイル済み Segment Group 部品です。
関連 API: fandhe-frontend-pre-styled-ui API / fandhe-frontend-headless-ui API
Demo
単一選択のセグメント UI（segmented control）。ネイティブ input[type="radio"] による排他選択を data-scope="segment-group" の anatomy へ重ね、選択中の項目を indicator の CSS 変数（--fandhe-segment-group-index/-count）で示します。状態機械は RadioGroup（SingleSelect）への全委譲です。
Features
- `size` variant クラスのみを `root` へ付与し、headless-ui の `segment_group::root` へ委譲する（`colorPalette` 軸を持たない）。
- `orientation`/`labelled_by` を `radio_group`/`radio_card`/`toggle_group` と同型で受け取る。
Anatomy
root
indicator
item
item-hidden-input
item-control
item-textAPI Reference
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
| size | Size | Size::Md | サイズ variant。 |
| disabled | bool | false | グループ全体の無効化状態。 |
| orientation | Option<Orientation> | None | キーボード操作方向のヒント（`aria-orientation`）。 |
| labelled_by | Option<&str> | None | `Some` のとき `aria-labelledby` を付与する。 |
| attrs | Vec<(&str, &str)> | root パーツへ合成する追加属性。 | |
| children | Vec<Node> | root 配下の子ノード。 |
Data Attributes
| Part | Attribute | Observed Values |
|---|---|---|
| indicator | data-state | checked |
| item | data-disabled | |
| item | data-state | checked, unchecked |
| item | data-value | grid, list, table |
| item-control | data-disabled | |
| item-control | data-state | checked, unchecked |
| item-hidden-input | data-state | checked, unchecked |
| item-text | data-disabled | |
| item-text | data-state | checked, unchecked |
| root | data-disabled |
CSS Variables
| Variable | Default |
|---|---|
| --fandhe-segment-group-count | 1 |
| --fandhe-segment-group-font-size | var(--fandhe-font-font-size-sm) |
| --fandhe-segment-group-index | 0 |
| --fandhe-segment-group-padding-block | 0.375rem |
| --fandhe-segment-group-padding-inline | 0.75rem |