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）への全委譲です。
Size
Features
sizevariant クラスのみを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-disabled | （値なし） |
indicator | data-orientation | vertical |
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 | （値なし） |
root | data-orientation | vertical |
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 |