下拉菜单

Dropdown是一个React组件,用于呈现单击时打开浮动内容模式的按钮。

该组件负责更新下拉菜单的状态(打开/关闭),处理单击外部时关闭菜单的操作,并使用渲染道具渲染按钮和内容。

用法

从“@wordpress/components”导入{Button,Dropdown};const MyDropdown=()=>(<下拉列表className=“my-container-class-name”contentClassName=“my-popover-content-classname”popoverProps={{placement:'bottom-start'}}renderToggle={({isOpen,onToggle})=>(<按钮variant=“主要”onClick={onToggle}aria-expanded={isOpen}>切换Popover!</按钮>) }renderContent={()=><div>这是popover的内容。</div>}/>);

道具

组件接受以下属性。未包含在此集合中的道具将应用于包装Popover内容的元素。

className:字符串

全局容器的className

  • 必需:否

contentClassName:string

如果要将下拉菜单作为样式设置的目标,则需要提供contentClassName,因为它不是作为容器节点的子节点呈现的。

  • 必需:否

默认打开:布尔值

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

  • 必需:否

expandOnMobile:布尔值

选择加入道具,在手机上全屏显示popovers。

  • 必需:否
  • 违约:

focusOnMount:'firstElement'|布尔值

默认情况下第一个tabable元素在popover中,当它挂载时将获得焦点。这与将此道具设置为“第一元素”.

指定真实的值将聚焦容器。

指定value完全禁用焦点处理(只有在存在适当可访问的替代行为时才应该这样做)。

  • 必需:否
  • 违约:“第一元素”

headerTitle:字符串

设置此选项可自定义手机全屏显示时下拉列表标题中显示的文本。

  • 必需:否

onClose:()=>无效

应该关闭popover时调用的回调。

  • 必需:否

打开:布尔

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

  • 必需:否

onToggle:(willOpen:boolean)=>无效

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

  • 必需:否

popoverProps:WordPressComponentProps<Omit<popoverProps,'children'>'div',false>

popoverProps对象的属性将作为道具传递给波波(Popover)组件。

使用此对象访问波波(Popover)中尚未公开的组件下拉菜单组件,例如:无箭头的popover功能。

  • 必需:否

renderContent:(props:CallbackProps)=>反应节点

调用回调以呈现下拉菜单的内容。

  • 是打开的:下拉菜单是否打开
  • 打开切换:一个将下拉菜单的状态从打开切换到关闭的功能,反之亦然
  • 关闭时:调用时关闭菜单的函数

  • 必需:是

renderToggle:(props:CallbackProps)=>反应节点

调用回调以呈现下拉切换按钮。

它的道具与renderContent(渲染内容)道具。

  • 必需:是

风格:反应。CSS属性

全局容器的样式

  • 必需:否