下拉
编辑
下拉菜单是一个React组件,用于呈现一个按钮,该按钮在单击时打开浮动内容模式。
该组件负责更新下拉菜单的状态(打开/关闭),处理在外面单击时关闭菜单的问题,并使用呈现道具来呈现按钮和内容。
使用
import {Button, Dropdown} from '@wordpress/components'const MyDropdown = () => ( ()} renderContent={() => 这是弹窗的内容。} />);
道具
该组件接受以下道具。此集合中不包含的道具将应用于包装弹窗内容的元素。
类名称
全局容器的className
- 类型:
字符串
- 要求:不
contentClassName
如果您希望针对下拉菜单进行样式化,则需要提供contentClassName,因为它没有被渲染为容器节点的子节点。
- 类型:
字符串
- 要求:不
位置
弹窗相对于其父节点应该打开的方向。指定一个y轴和一个x轴作为空格分隔的字符串。支持“顶级”
,“底”
轴,“左”
,“中心”
,“正确”
轴。
- 类型:
字符串
- 要求:不
- 默认值:
“中心”
renderToggle
调用一个回调来呈现下拉切换按钮。
- 类型:
函数
- 要求:是的
回调的第一个参数是一个包含以下属性的对象:
isOpen
:是否打开下拉菜单onToggle
:一个函数切换下拉菜单的状态从打开到关闭,反之亦然onClose
:调用时关闭菜单的函数
renderContent
为呈现下拉菜单的内容而调用的回调。它的第一个参数和renderToggle
道具。
- 类型:
函数
- 要求:是的
expandOnMobile
选择在道具显示弹窗全屏在手机上。
- 类型:
布尔
- 要求:不
- 默认值:
假
headerTitle
设置此选项以自定义当手机上全屏显示时下拉标题中显示的文本。
- 类型:
字符串
- 要求:不
focusOnMount
默认情况下,第一个tabbable元素在弹出窗口将收到焦点时,它安装。这和设置这个道具是一样的“firstElement”
.
指定一个真正的
Value将关注容器。
指定一个假
值完全禁用焦点处理(这只应该在存在适当可访问的替代行为时执行)。
- 类型:
firstElement |布尔
- 要求:不
- 默认值:
“firstElement”
popoverProps
对象的popoverProps属性将作为道具传递给弹出窗口
组件。
对象的属性/特性弹出窗口
控件中尚未公开的组件下拉
组件,例如:弹窗不带箭头的能力。
- 类型:
对象
- 要求:不
onClose
当弹出窗口应该关闭时调用的回调。
- 类型:
函数
- 要求:不
onToggle
当弹出窗口的状态从打开变为关闭时调用的回调函数,反之亦然。
回调函数接收一个布尔值作为参数。如果真正的
,弹出窗口将打开。如果假
,弹出窗口将关闭。
- 类型:
函数
- 要求:不