下拉编辑

下拉菜单是一个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

当弹出窗口的状态从打开变为关闭时调用的回调函数,反之亦然。

回调函数接收一个布尔值作为参数。如果真正的,弹出窗口将打开。如果,弹出窗口将关闭。

  • 类型:函数
  • 要求:不