MenuItem

使用法

import { useState } from 'react';
import { MenuItem } from '@wordpress/components';
const MyMenuItem = () => {
   const [ isActive, setIsActive ] = useState( true );
   return (
   <MenuItem
   icon={ isActive ? 'yes' : 'no' }
   isSelected={ isActive }
   onClick={ () => setIsActive( ( state ) => ! state ) }
   >
   Toggle
   </MenuItem>
   );
};

プロパティ

MenuItem は以下のプロパティをサポートしています。追加のプロパティは、基盤となる Button に渡されます。

子要素

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

ボタンの子要素としてレンダリングする要素。

無効

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

Button の disabled プロパティ のドキュメントを参照してください。

情報

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

ボタンテキストの説明として使用するテキスト。

label のドキュメントを参照してください。

アイコン

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

Button の icon プロパティ のドキュメントを参照してください。

アイコンの位置

• タイプ: string
• 必須: いいえ
• デフォルト: 'right'

提供された icon を表示する位置を決定します。

選択されているか

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

メニュー項目が現在選択されているかどうか。 isSelected は、role プロパティが "menuitemcheckbox" または "menuitemradio" のいずれかである場合にのみ考慮されます。

ショートカット

• タイプ: string または object
• 必須: いいえ

ショートカットが文字列の場合、表示テキストを期待します。ショートカットがオブジェクトの場合、display (文字列) と ariaLabel (文字列) のプロパティを受け入れます。

役割

• タイプ: string
• 必須: いいえ
• デフォルト: 'menuitem'

Aria Spec。選択可能なメニュー項目が必要な場合は、単一選択用に menuitemradio を、複数選択用に menuitemcheckbox を使用してください。

接尾辞

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

アイコンやショートカット以外のマークアップをメニュー項目に追加することができます。