下拉菜单

DropdownMenu以简洁的方式显示操作列表(每个操作都包含在MenuItem、MenuItemsChoice或MenuGroup中)。当用户与元素(按钮或图标)交互或执行特定操作时,它会出现在弹出菜单中。

展开的DropdownMenu,包含MenuItems列表。

解剖

下拉菜单剖析。

  1. Popover:包装DropdownMenu的容器组件。
  2. 父按钮:用于切换包含下拉菜单的Popover的显示的图标或按钮。
  3. 菜单项:下拉菜单中的列表项。

设计指南

用法

何时使用下拉菜单

当您希望用户执行以下操作时,请使用DropdownMenu:

  • 从列表中选择操作或更改设置,以及
  • 仅在上下文中查看可用选项。

如果需要始终显示所有可用选项,请考虑使用工具栏。

用户与图标交互后,使用DropdownMenu显示操作列表。


用户与图标交互后,使用DropdownMenu显示操作列表。

不要将DropdownMenu用于应该始终可见的重要操作。请改用工具栏。

不要
不要将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(导航)菜单中尚未公开的组件下拉菜单组件,例如:菜单集的方向方向道具。

  • 必需:否

禁用按箭头向下打开:布尔值

在某些情况下,可能需要禁用用于打开下拉菜单的向下箭头键,例如,当该键用于执行另一个操作时。

  • 必需:否
  • 违约:

默认打开:布尔值

初始渲染时下拉菜单的打开状态。在不需要控制其打开状态时使用。它将被打开属性(如果在组件的第一次渲染中指定)。

  • 必需:否

打开:布尔

下拉菜单的受控打开状态。必须与一起使用打开切换.

  • 必需:否

onToggle:(willOpen:boolean)=>无效

当下拉列表的状态从打开变为关闭时调用的回调,反之亦然。

  • 必需:否