DropdownMenu以简洁的方式显示操作列表(每个操作都包含在MenuItem、MenuItemsChoice或MenuGroup中)。当用户与元素(按钮或图标)交互或执行特定操作时,它会出现在弹出菜单中。
![展开的DropdownMenu,包含MenuItems列表。](https://i0.wp.com/wordpress.org/gutenberg/files/2019/01/DropdownMenuExample.png?ssl=1)
![下拉菜单剖析。](https://i0.wp.com/wordpress.org/gutenberg/files/2019/01/DropdownMenuAnatomy.png?ssl=1)
- Popover:包装DropdownMenu的容器组件。
- 父按钮:用于切换包含下拉菜单的Popover的显示的图标或按钮。
- 菜单项:下拉菜单中的列表项。
何时使用下拉菜单
当您希望用户执行以下操作时,请使用DropdownMenu:
- 从列表中选择操作或更改设置,以及
- 仅在上下文中查看可用选项。
如果需要始终显示所有可用选项,请考虑使用工具栏。
![用户与图标交互后,使用DropdownMenu显示操作列表。](https://i0.wp.com/wordpress.org/gutenberg/files/2019/01/DropdownMenuDo.png?ssl=1)
做
用户与图标交互后,使用DropdownMenu显示操作列表。
![不要将DropdownMenu用于应该始终可见的重要操作。请改用工具栏。](https://i0.wp.com/wordpress.org/gutenberg/files/2019/01/DropdownMenuDont.png?ssl=1)
不要
不要将DropdownMenu用于常用操作。请改用工具栏。
行为
通常,父按钮应该在图标或文本的右侧有一个三角形图标,以指示与它交互将显示下拉菜单。在极少数情况下,父按钮直接指示将有更多内容(通过使用省略号或“more”标签),这可以省略。
无论是否显示DropdownMenu,父按钮都应保持相同的视觉样式。
安置
DropdownMenu通常应直接显示在父按钮的下方或左侧。如果下面没有足够的空间显示完整的DropdownMenu,则可以将其显示在父按钮上方。
DropdownMenu是一个React组件,用于呈现按钮的可展开菜单。其目的与<选择>
元素,区别在于它不维护值。相反,每个选项都充当一个操作按钮。
使用一组控件渲染下拉菜单:
从“@wordpress/components”导入{DropdownMenu};导入{更多,箭头向左,箭头向右,箭头向上,箭头向下,}来自“@wordpress/icons”;const MyDropdownMenu=()=>(<下拉菜单icon={more}label=“选择方向”控件={[{title:'向上',icon:箭头向上,onClick:()=>console.log('up'),},{title:“正确”,icon:箭头向右,onClick:()=>console.log('right'),},{title:'向下',icon:箭头向下,onClick:()=>console.log('down'),},{title:'左',icon:箭头左,onClick:()=>console.log('left'),},] }/>);
或者,指定儿童
函数返回可在DropdownMenu中使用的有效元素:菜单项
,菜单项选项
,或菜单组
.
从“@wordpress/components”导入{DropdownMenu,MenuGroup,MenuItem};从“@wordpress/icons”导入{more、arrowUp、arrow Down、trash};const MyDropdownMenu=()=>(<DropdownMenu icon={more}label=“选择方向”>{({onClose})=>(<><菜单组><菜单项图标={arrowUp}onClick={onClose}>上移</MenuItem><MenuItem icon={arrowDown}onClick={onClose}>下移</MenuItem></MenuGroup(菜单组)><菜单组><MenuItem icon={trash}onClick={onClose}>删除</MenuItem></MenuGroup(菜单组)></>) }</DropdownMenu>);
组件接受以下道具:
偶像
:字符串|空
这个仪表盘图标图标slug显示在折叠菜单按钮中。
另请参见:https://developer.wordpress.org/resource/dashicons网站/
标签
:一串
在聚焦的折叠菜单按钮上显示为可访问性文本的可读标签。
控制:
DropdownOption[]|下拉选项[][]
对象的数组或嵌套数组,用于描述要在展开菜单中显示的选项。
每个对象都应包括偶像
仪表盘图标slug字符串,可读标题
字符串,is已禁用
布尔标志和onClick(单击)
选择选项时调用的函数回调。
有效的DropdownMenu必须指定控制
或儿童
道具或两者兼而有之。
–必需:否
儿童
:(callbackProps:DropdownCallbackProps)=>反应节点
A类函数渲染属性它应该返回一个或多个在DropdownMenu中有效使用的元素:菜单项
,菜单项选项
,或菜单组
。它的第一个参数是一个props对象,其中包含与给定给下拉菜单
的renderContent(渲染内容)
(是打开的
,打开切换
,关闭时
).
有效的DropdownMenu必须指定控制
或儿童
道具或两者兼而有之。
另请参见:https://developer.wordpress.org/resource/dashicons网站/
类名
:一串
要应用于下拉菜单的切换元素包装器的类名。
popoverProps公司
:DropdownProps['popoverProps']
的属性popoverProps公司
对象将作为属性传递给嵌套波波(Popover)
组件。
使用此对象修改可用于波波(Popover)
中尚未公开的组件下拉菜单
组件,例如:popover相对于其父节点集的打开方向位置
道具。
切换道具
:切换道具
的属性切换道具
对象将作为属性传递给嵌套按钮
中的组件渲染切换
实施下拉菜单
内部使用的组件。
使用此对象修改可用于按钮
尚未在中公开的组件下拉菜单
组件,例如:悬停设置上显示的工具提示文本工具提示
道具。
菜单属性
:可导航容器属性
的属性菜单属性
对象将作为属性传递给嵌套Navigable(导航)菜单
中的组件renderContent(渲染内容)
实施下拉菜单
内部使用的组件。
使用此对象修改可用于Navigable(导航)菜单
中尚未公开的组件下拉菜单
组件,例如:菜单集的方向方向
道具。
禁用按箭头向下打开
:布尔值
在某些情况下,可能需要禁用用于打开下拉菜单的向下箭头键,例如,当该键用于执行另一个操作时。
初始渲染时下拉菜单的打开状态。在不需要控制其打开状态时使用。它将被打开
属性(如果在组件的第一次渲染中指定)。
下拉菜单的受控打开状态。必须与一起使用打开切换
.
当下拉列表的状态从打开变为关闭时调用的回调,反之亦然。