Toolbar

デザインガイドライン

使用法

ベストプラクティス

ツールバーは次のようにすべきです：

• クリックまたはタップがアクションをトリガーすることを明確に伝える。
• 確立された色を適切に使用する。 例えば、元に戻すことが難しいまたは不可能なアクションには赤を使用するのみ。
• ブロックと一緒に使用する場合は、ブロックの上に一貫した位置を持つべきです。さもなければ、インターフェース内で一貫した位置を持つべきです。

状態

アクティブで利用可能なツールバー

ツールバーの状態は、どのアイコンボタンがアクティブであるかを明確に示します。ホバーおよびフォーカス状態は、ツールバー内のアイコンボタンの利用可能な選択肢を表現します。

無効なツールバー

選択できないツールバーは、無効な状態を与えるか、隠すことができます。

開発ガイドライン

使用法

import { Toolbar, ToolbarButton } from '@wordpress/components';
import { formatBold, formatItalic, link } from '@wordpress/icons';
function MyToolbar() {
   return (
   <Toolbar label="Options">
   <ToolbarButton icon={ formatBold } label="Bold" />
   <ToolbarButton icon={ formatItalic } label="Italic" />
   <ToolbarButton icon={ link } label="Link" />
   </Toolbar>
   );
}

プロパティ

ツールバーはすべてのHTMLプロパティを基礎となる要素に渡します。さらに、以下に指定されたカスタムプロパティを渡すことができます。

className: string

コンテナdivに設定するクラス。

• 必須: いいえ

label: string

ツールバーのためのアクセシブルなラベル。

• 必須: はい

variant: ‘unstyled’ | undefined

ツールバーのスタイルを指定します。

デフォルトスタイルのために未定義のままにします。あるいは、'unstyled'を使用してツールバーから境界線を削除しますが、デフォルトのポップオーバースタイルは保持します。

• 必須: いいえ
• デフォルト: undefined

orientation: ‘horizontal’ | ‘vertical’

ツールバーの向きを指定します。

未定義のままにするか、水平向きのキーボード操作のために「horizontal」を選択し、代わりに「vertical」を選択します。

• 必須: いいえ
• デフォルト: horizontal
  

関連コンポーネント

• ツールバーはToolbarGroup、ToolbarButton、およびToolbarItemを子として含むことができます。