ツールバー

ボタン、トグルグループ、ドロップダウンメニューなどのコントロールをグループ化するためのコンテナです。

import React from 'react';
import * as Toolbar from '@radix-ui/react-toolbar';
import {
  StrikethroughIcon,
  TextAlignLeftIcon,
  TextAlignCenterIcon,
  TextAlignRightIcon,
  FontBoldIcon,
  FontItalicIcon,
} from '@radix-ui/react-icons';
import './styles.css';

const ToolbarDemo = () => (
  <Toolbar.Root className="ToolbarRoot" aria-label="Formatting options">
    <Toolbar.ToggleGroup type="multiple" aria-label="Text formatting">
      <Toolbar.ToggleItem className="ToolbarToggleItem" value="bold" aria-label="Bold">
        <FontBoldIcon />
      </Toolbar.ToggleItem>
      <Toolbar.ToggleItem className="ToolbarToggleItem" value="italic" aria-label="Italic">
        <FontItalicIcon />
      </Toolbar.ToggleItem>
      <Toolbar.ToggleItem
        className="ToolbarToggleItem"
        value="strikethrough"
        aria-label="Strike through"
      >
        <StrikethroughIcon />
      </Toolbar.ToggleItem>
    </Toolbar.ToggleGroup>
    <Toolbar.Separator className="ToolbarSeparator" />
    <Toolbar.ToggleGroup type="single" defaultValue="center" aria-label="Text alignment">
      <Toolbar.ToggleItem className="ToolbarToggleItem" value="left" aria-label="Left aligned">
        <TextAlignLeftIcon />
      </Toolbar.ToggleItem>
      <Toolbar.ToggleItem className="ToolbarToggleItem" value="center" aria-label="Center aligned">
        <TextAlignCenterIcon />
      </Toolbar.ToggleItem>
      <Toolbar.ToggleItem className="ToolbarToggleItem" value="right" aria-label="Right aligned">
        <TextAlignRightIcon />
      </Toolbar.ToggleItem>
    </Toolbar.ToggleGroup>
    <Toolbar.Separator className="ToolbarSeparator" />
    <Toolbar.Link className="ToolbarLink" href="#" target="_blank" style={{ marginRight: 10 }}>
      Edited 2 hours ago
    </Toolbar.Link>
    <Toolbar.Button className="ToolbarButton" style={{ marginLeft: 'auto' }}>
      Share
    </Toolbar.Button>
  </Toolbar.Root>
);

export default ToolbarDemo;

機能

フルキーボードナビゲーション。

インストール

コマンドラインからコンポーネントをインストールします。

npm install @radix-ui/react-toolbar

構成

コンポーネントをインポートします。

import * as Toolbar from '@radix-ui/react-toolbar';

export default () => (
  <Toolbar.Root>
    <Toolbar.Button />
    <Toolbar.Separator />
    <Toolbar.Link />
    <Toolbar.ToggleGroup>
      <Toolbar.ToggleItem />
    </Toolbar.ToggleGroup>
  </Toolbar.Root>
);

API リファレンス

ルート

すべてのツールバーコンポーネントパーツを含みます。

プロパティ	型	デフォルト
`asChild`	`ブール値`	`false`
`orientation`	`列挙型`	`"horizontal"`
`dir`	`列挙型`	デフォルト値なし
`loop`	`ブール値`	`true`

データ属性	値
`[data-orientation]`	`"vertical" \|"horizontal"`

ボタン

ボタンアイテム。

プロパティ	型	デフォルト
`asChild`	`ブール値`	`false`

データ属性	値
`[data-orientation]`	`"vertical" \|"horizontal"`

リンク

リンクアイテム。

プロパティ	型	デフォルト
`asChild`	`ブール値`	`false`

トグルグループ

オンまたはオフに切り替えることができる、2状態のボタンのセット。

プロパティ	型	デフォルト
`asChild`	`ブール値`	`false`
`type*`	`列挙型`	デフォルト値なし
`value`	`文字列`	デフォルト値なし
`defaultValue`	`文字列`	デフォルト値なし
`onValueChange`	`関数`	デフォルト値なし
`value`	`文字列配列`	`[]`
`defaultValue`	`文字列配列`	`[]`
`onValueChange`	`関数`	デフォルト値なし
`disabled`	`ブール値`	`false`

データ属性	値
`[data-orientation]`	`"vertical" \|"horizontal"`

トグルアイテム

グループ内のアイテム。

プロパティ	型	デフォルト
`asChild`	`ブール値`	`false`
`value*`	`文字列`	デフォルト値なし
`disabled`	`ブール値`	デフォルト値なし

データ属性	値
`[data-state]`	`"on" \|"off"`
`[data-disabled]`	無効の場合に表示
`[data-orientation]`	`"vertical" \|"horizontal"`

セパレーター

ツールバー内のアイテムを視覚的に区切るために使用されます。

プロパティ	型	デフォルト
`asChild`	`ブール値`	`false`

データ属性	値
`[data-orientation]`	`"vertical" \|"horizontal"`

例

他のプリミティブとの使用

Trigger パーツを公開するすべてのプリミティブ（Dialog、AlertDialog、Popover、DropdownMenuなど）は、asChild プロパティを使用してツールバー内に構成できます。

これは、当社のDropdownMenuプリミティブを使用した例です。

import * as Toolbar from '@radix-ui/react-toolbar';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';

export default () => (
  <Toolbar.Root>
    <Toolbar.Button>Action 1</Toolbar.Button>
    <Toolbar.Separator />
    <DropdownMenu.Root>
      <Toolbar.Button asChild>
        <DropdownMenu.Trigger>Trigger</DropdownMenu.Trigger>
      </Toolbar.Button>
      <DropdownMenu.Content>…</DropdownMenu.Content>
    </DropdownMenu.Root>
  </Toolbar.Root>
);

アクセシビリティ

アイテム間のフォーカス移動を管理するために、ロービングtabIndex を使用しています。

キーボード操作

キー	説明
`Tab`	グループの最初のアイテムにフォーカスを移動します。
`Space`	アイテムを有効/無効にします。
`Enter`	アイテムを有効/無効にします。
`ArrowDown`	`orientation`に応じて、次のアイテムにフォーカスを移動します。
`ArrowRight`	`orientation`に応じて、次のアイテムにフォーカスを移動します。
`ArrowUp`	`orientation`に応じて、前のアイテムにフォーカスを移動します。
`ArrowLeft`	`orientation`に応じて、前のアイテムにフォーカスを移動します。
`Home`	最初のアイテムにフォーカスを移動します。
`End`	最後のアイテムにフォーカスを移動します。

前へトグルグループ

次へツールチップ

GitHubでこのページを編集します。

概要

ガイド

コンポーネント

ユーティリティ

機能