MenuItem 是一个用于渲染按钮的组件,通常与 DropdownMenu 组件结合使用,支持多种属性来自定义菜单项的行为和外观。
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 is a component which renders a button intended to be used in combination with the DropdownMenu component.
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 supports the following props. Any additional props are passed through to the underlying Button.
childrenElementElement to render as child of button.
disabledbooleanRefer to documentation for Button’s disabled prop.
infostringText to use as description for button text.
Refer to documentation for label.
iconstringRefer to documentation for Button’s icon prop.
iconPositionstring'right'Determines where to display the provided icon.
isSelectedbooleanWhether or not the menu item is currently selected. isSelected is only taken into account when the role prop is either "menuitemcheckbox" or "menuitemradio".
shortcutstring or objectIf shortcut is a string, it is expecting the display text. If shortcut is an object, it will accept the properties of display (string) and ariaLabel (string).
rolestring'menuitem'Aria Spec. If you need to have selectable menu items use menuitemradio for single select, and menuitemcheckbox for multiselect.
suffixElementAllows for markup other than icons or shortcuts to be added to the menu item.