ボタングループ

ボタンファミリーから共有された境界線、半径/2lg およびシャドウ/xs を 1 つの制御に溶かしたセカンダリスタイルのボタンの列は、外側の角のみでヘアラインによって分割されたアイテムです。 アニメーションの親指を持つセグメント化されたスイッチャーのために、代わりにセグメント化されたコントロールにリーチします。 ボタングループは、ツールバー/フィルタの風味です。

インストール

CLI または手動でこのボタングループコンポーネントを追加できます。

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

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

npx boardui@latest add button-group

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

選択された項目

選択する ホバーの充填とセットにアイテムを保持します。 aria-pressed - 単一か複数の選択のツールバーのための状態からそれを運転して下さい。

const [view, setView] = useState("list"); <ButtonGroup aria-label="View"> {views.map(({ id, label, icon }) => ( <ButtonGroupItem key={id} leadingIcon={icon} selected={view === id} onClick={() => setView(id)} > {label} </ButtonGroupItem> ))}</ButtonGroup>

アイコンのみ

iconOnly アイテムは四角に崩壊 - それぞれを与える aria-label 目に見えるテキストがないため。

{/* Icon-only items are square - aria-label each one */}<ButtonGroup size="small" aria-label="Formatting"> <ButtonGroupItem iconOnly leadingIcon={RiBold} aria-label="Bold" /> <ButtonGroupItem iconOnly leadingIcon={RiItalic} aria-label="Italic" /> <ButtonGroupItem iconOnly leadingIcon={RiUnderline} aria-label="Underline" /></ButtonGroup>