Dropdown 是一个 React 组件，用于渲染一个按钮，点击时会打开浮动内容模态框。

该组件负责更新下拉菜单的状态（打开/关闭），处理点击外部区域时关闭菜单的功能，并使用 render props 来渲染按钮和内容。

用法

import { Button, Dropdown } from '@wordpress/components';

const MyDropdown = () => (
    <Dropdown
        className="my-container-class-name"
        contentClassName="my-popover-content-classname"
        popoverProps={ { placement: 'bottom-start' } }
        renderToggle={ ( { isOpen, onToggle } ) => (
            <Button
                variant="primary"
                onClick={ onToggle }
                aria-expanded={ isOpen }
            >
                Toggle Popover!
            </Button>
        ) }
        renderContent={ () => <div>This is the content of the popover.</div> }
    />
);

属性

该组件接受以下 props。未包含在此集合中的 props 将应用于包裹 Popover 内容的元素。

className: string

全局容器的 className

  • Required: No

contentClassName: string

如果您希望针对下拉菜单进行样式设置，需要提供 contentClassName，因为它不是作为容器节点的子节点呈现的。

  • Required: No

defaultOpen: boolean

初始渲染时下拉菜单的打开状态。当您不需要控制其打开状态时使用。如果在组件首次渲染时指定了 open prop，它将被覆盖。

  • Required: No

expandOnMobile: boolean

选择加入的属性，以便在移动设备上以全屏模式显示弹出层。

  • Required: No
  • Default: false

focusOnMount: ‘firstElement’ | boolean

默认情况下，当弹出层挂载时，其中的第一个可聚焦元素将获得焦点。这与将此 prop 设置为 "firstElement" 相同。

指定 true 值将改为聚焦容器。

指定 false 值将完全禁用焦点处理（这仅在存在适当的可访问替代行为时才应这样做）。

  • Required: No
  • Default: "firstElement"

headerTitle: string

设置此值以自定义在移动设备全屏模式下显示的下拉菜单标题中的文本。

  • Required: No

onClose: () => void

当弹出层应被关闭时调用的回调函数。

  • Required: No

open: boolean

下拉菜单的控制型打开状态。必须与 onToggle 配合使用。

  • Required: No

onToggle: ( willOpen: boolean ) => void

当下拉菜单状态从打开变为关闭或反之亦然时调用的回调函数。

  • Required: No

popoverProps: WordPressComponentProps< Omit< PopoverProps, ‘children’ > ‘div’, false >

popoverProps 对象的属性将作为 props 传递给 Popover 组件。

使用此对象可以访问 Popover 组件中尚未在 Dropdown 组件中暴露的属性/功能，例如：使弹出层不带箭头的功能。

  • Required: No

renderContent: ( props: CallbackProps ) => ReactNode

用于渲染下拉菜单内容的回调函数。

  • isOpen: 下拉菜单是否已打开
  • onToggle: 一个函数，用于在下拉菜单状态从打开变为关闭或反之之间切换
  • onClose: 如果调用则关闭菜单的函数

  • Required: Yes

renderToggle: ( props: CallbackProps ) => ReactNode

用于渲染下拉菜单切换按钮的回调函数。

其 props 与 renderContent 的 props 相同。

  • Required: Yes

style: React.CSSProperties

全局容器的样式

  • Required: No