Navigation

使用法

import {
   __experimentalNavigation as Navigation,
   __experimentalNavigationGroup as NavigationGroup,
   __experimentalNavigationItem as NavigationItem,
   __experimentalNavigationMenu as NavigationMenu,
} from '@wordpress/components';
const MyNavigation = () => (
   <Navigation>
   <NavigationMenu title="Home">
   <NavigationGroup title="Group 1">
   <NavigationItem item="item-1" title="Item 1" />
   <NavigationItem item="item-2" title="Item 2" />
   </NavigationGroup>
   <NavigationGroup title="Group 2">
   <NavigationItem
   item="item-3"
   navigateToMenu="category"
   title="Category"
   />
   </NavigationGroup>
   </NavigationMenu>
   <NavigationMenu
   backButtonLabel="Home"
   menu="category"
   parentMenu="root"
   title="Category"
   >
   <NavigationItem badge="1" item="child-1" title="Child 1" />
   <NavigationItem item="child-2" title="Child 2" />
   </NavigationMenu>
   </Navigation>
);

ナビゲーションプロップ

Navigation は以下のプロップをサポートしています。

activeItem

• タイプ: string
• 必須: いいえ

アクティブアイテムのスラグ。

activeMenu

• タイプ: string
• 必須: いいえ
• デフォルト: “root”

アクティブメニューのスラグ。

className

• タイプ: string
• 必須: いいえ

Navigation コンポーネントのオプションの className。

onActivateMenu

• タイプ: function
• 必須: いいえ

外部状態とナビゲーションの内部状態間でアクティブメニューを同期します。

ナビゲーションメニュープロップ

NavigationMenu は以下のプロップをサポートしています。

backButtonLabel

• タイプ: string
• 必須: いいえ
• デフォルト: 親メニューのタイトルまたは “戻る”

ネストされたメニューで使用される戻るボタンのラベル。提供されない場合、ラベルは親メニューのタイトルから推測されます。

何らかの理由で親メニューのタイトルが利用できない場合は、“戻る”にデフォルト設定されます。

onBackButtonClick

• タイプ: function
• 必須: いいえ

戻るボタンのクリックを処理するためのコールバック。このプロップが提供されると、戻るボタンが表示されます。

className

• タイプ: string
• 必須: いいえ

NavigationMenu コンポーネントのオプションの className。

hasSearch

• タイプ: boolean
• 必須: いいえ

メニュータイトルで検索機能を有効にします。

menu

• タイプ: string
• 必須: いいえ
• デフォルト: “root”

メニューの一意の識別子。ルートメニューはこれを省略でき、デフォルトで“root”になります。他のすべてのメニューはこれを指定する必要があります。

onSearch

• タイプ: ( searchString: string ) => void;
• 必須: いいえ

hasSearch がアクティブなとき、この関数は検索入力の onChange イベントを処理し、外部から制御します。search プロップも設定する必要があります。

isSearchDebouncing

• タイプ: boolean
• 必須: いいえ

検索がデバウンスされているかどうかを示します。true の場合、“結果が見つかりませんでした。”というテキストは省略されます。デバウンスされた検索の間に“結果が見つかりませんでした。”というテキストを表示しないように使用されます。

parentMenu

• タイプ: string
• 必須: いいえ

親メニューのスラグ。ネストされたメニューが親メニューを示すために使用します。

search

• タイプ: string
• 必須: いいえ

hasSearch がアクティブで onSearch が提供されているとき、これは検索入力の値を制御します。onSearch プロップが提供されているときに必要です。

isEmpty

• タイプ: boolean
• 必須: いいえ

メニューが空であるかどうかを示します。ナビゲーションアイテムの hideIfTargetMenuEmpty プロップと一緒に使用されます。

title

• タイプ: string
• 必須: いいえ

メニューのタイトル。これはメニュー検索機能で使用されるフィールドでもあります。

titleAction

• タイプ: React.ReactNode
• 必須: いいえ

このプロップを使用して、メニュータイトルに追加のアクションをレンダリングします。

ナビゲーショングループプロップ

NavigationGroup は以下のプロップをサポートしています。

className

• タイプ: string
• 必須: いいえ

NavigationGroup コンポーネントのオプションの className。

title

• タイプ: string
• 必須: いいえ

グループのタイトル。

ナビゲーションアイテムプロップ

NavigationItem は以下のプロップをサポートしています。

badge

• タイプ: string|Number
• 必須: いいえ

アイテムバッジの内容。

className

• タイプ: string
• 必須: いいえ

NavigationItem コンポーネントのオプションの className。

href

• タイプ: string
• 必須: いいえ

提供される場合、a を button の代わりにレンダリングします。

icon

• タイプ: JSX.Element
• 必須: いいえ

children が渡されない場合、このプロップはメニューアイテムのカスタムアイコンを指定することを可能にします。

item

• タイプ: string
• 必須: いいえ

アイテムの一意の識別子。

navigateToMenu

• タイプ: string
• 必須: いいえ

子メニューのスラグ。提供される場合、アイテムをクリックするとターゲットメニューにナビゲートします。

hideIfTargetMenuEmpty

• タイプ: boolean
• 必須: いいえ

このアイテムが、navigateToMenu で指定されたメニューが isEmpty プロップで空としてマークされている場合に隠れるべきかどうかを示します。ナビゲーションメニューの isEmpty プロップと一緒に使用されます。

onClick

• タイプ: React.MouseEventHandler
• 必須: いいえ

メニューアイテムのクリックを処理するためのコールバック。

isText

• タイプ: boolean
• 必須: いいえ
• デフォルト: false

true に設定されている場合、メニューアイテムはボタンではなくテキストのみのアイテムとして機能します。

title

• タイプ: string
• 必須: いいえ

アイテムのタイトル。