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
如果要将下拉菜单作为样式设置的目标,则需要提供contentClassName,因为它不是作为容器节点的子节点呈现的。
初始渲染时下拉列表的打开状态。在不需要控制其打开状态时使用。它将被打开
属性(如果在组件的第一次渲染中指定)。
选择加入道具,在手机上全屏显示popovers。
默认情况下第一个tabable元素在popover中,当它挂载时将获得焦点。这与将此道具设置为“第一元素”
.
指定真实的
值将聚焦容器。
指定假
value完全禁用焦点处理(只有在存在适当可访问的替代行为时才应该这样做)。
设置此选项可自定义手机全屏显示时下拉列表标题中显示的文本。
应该关闭popover时调用的回调。
下拉列表的受控打开状态。必须与一起使用打开切换
.
当下拉列表的状态从打开变为关闭时调用的回调,反之亦然。
popoverProps对象的属性将作为道具传递给波波(Popover)
组件。
使用此对象访问波波(Popover)
中尚未公开的组件下拉菜单
组件,例如:无箭头的popover功能。
调用回调以呈现下拉菜单的内容。
是打开的
:下拉菜单是否打开
打开切换
:一个将下拉菜单的状态从打开切换到关闭的功能,反之亦然
关闭时
:调用时关闭菜单的函数
-
必需:是
调用回调以呈现下拉切换按钮。
它的道具与renderContent(渲染内容)
道具。
全局容器的样式