ナビ行NavRowExperimental
The flush settings / nav-list row: a leading icon, a label (+ description), a right-aligned current value, and a trailing chevron — the `[icon] label … value [›]` row every settings / account / マイページ / menu screen is built from. With onSelect the whole row is a NAVIGATION / disclosure button (chevron default, aria-haspopup="dialog" via opensDialog) — deliberately NOT aria-pressed: a row that opens a detail is navigation, not a toggle (the a11y trap of using ListCard.onSelect for settings rows). Without onSelect it is a static control row — put a Switch / Badge in trailing. Group rows in SettingGroup for the rounded-container + hairline-divider look. Distinct from ListCard (a bordered card with aria-pressed selection). RSC-safe except the opt-in onSelect.
プレビュー
Props
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| label | ReactNode | - | 主ラベル。 |
| icon | ReactNode | - | 先頭アイコン。 |
| description | ReactNode | - | ラベル下の副次行。 |
| value | ReactNode | - | 右寄せの現在値（お支払い方法→口座振替）。 |
| trailing | ReactNode | - | 末尾アクセサリ。onSelect 時は既定で chevron。Switch/Badge を渡すと非ナビの操作行。null で抑制。 |
| opensDialog | boolean | - | 行が詳細を その場で開く（aria-haspopup="dialog"）。別画面遷移なら省略。 |
| onSelect | () => void | - | 行全体をナビ/ディスクロージャーの button に（aria-pressed ではない＝トグルでなく遷移）。省略すると静的な操作行。 |
| SettingGroup.label | ReactNode | - | グループ見出し（コンテナ上に表示）。 |
| SettingGroup.children | ReactNode | - | NavRow 群＝丸角コンテナ内をハイラインで区切る。 |
Usage
import { NavRow, SettingGroup, Switch } from "@gunjo/ui"
<SettingGroup label="お支払い">
{/* Navigation row — opens a detail. aria-haspopup, NOT aria-pressed. */}
<NavRow icon={<IconCreditCard />} label="お支払い方法" value="口座振替"
opensDialog onSelect={() => open("payment")} />
{/* Static control row — a Switch in trailing (no onSelect → not a button). */}
<NavRow label="配達前プッシュ通知"
trailing={<Switch checked={on} onCheckedChange={setOn} aria-label="配達前プッシュ通知" />} />
</SettingGroup>