セグメントコントロール

第3階層の背景色に白い選択表示がスライドする、単一選択の切り替えです。チャートカードの週次・月次・年次の切り替えにも使われています。React AriaのToggleButtonGroupを基盤にし、矢印キーで移動、Spaceで選択できます。

インストール

CLI または手動でこのセグメンテーション制御を追加できます。

ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.

CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。

npx boardui@latest add segmented-control

共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。

コントロールされた選択

選択は React Aria のキーセット API を使用します: パス selectedKeys + onSelectionChange それを制御するために、または defaultSelectedKeys 制御不能のため。 1 つの区分を常に活動的に保つために空のセットに対して監視して下さい。

const [period, setPeriod] = useState(new Set(["weekly"])); <SegmentedControl selectedKeys={period} onSelectionChange={(keys) => keys.size > 0 && setPeriod(new Set(keys))} aria-label="Period"> <SegmentedControlItem id="weekly">Weekly</SegmentedControlItem> <SegmentedControlItem id="monthly">Monthly</SegmentedControlItem></SegmentedControl>