波波（Popover）

波波（Popover）以浮动模式呈现其内容。如果没有通过props传递显式锚点，则默认情况下它锚点到其父元素。

可以通过其道具控制popover在超出视口边缘时的行为。

用法

渲染与其容器相邻的弹出窗口。

如果组件返回Popover，则会显示它。要隐藏popover，只需从组件的渲染值中省略它。

从'react'导入{useState}；从“@wordpress/components”导入{Button，Popover}；const MyPopover=（）=>{const[isVisible，setIsVisible]=使用状态（false）；常量切换可见=（）=>{setIsVisible（（state）=>！状态）；};返回(<Button variant=“secondary”onClick={toggleVisible}>切换Popover！｛isVisible&&＜Popover＞Popover已切换！</Popover＞｝</按钮>);};

为了传递显式锚点，可以使用锚道具。这样做时，锚件应以本地状态存储而不是普通的React-ref，以确保在其更改时进行反应式更新。

从'react'导入{useState}；从“@wordpress/components”导入{Button，Popover}；const MyPopover=（）=>{//使用内部状态而不是ref来确保组件//当popover的锚更新时重新读取。const[popoverAnchor，setPopoverAncor]=useState（）；const[isVisible，setIsVisible]=使用状态（false）；常量切换可见=（）=>{setIsVisible（（state）=>！状态）；};返回(<p ref={setPopoverAnchor}>Popover的锚点</p><Button variant=“secondary”onClick={toggleVisible}>切换Popover！</按钮>{可见&&(<波波弗锚={popoverAnchor}>Popover被切换了！</Popover>) });};

默认情况下，弹出窗口在文档正文的末尾呈现。如果希望Popover元素呈现到页面上的特定位置，则必须呈现一个波波头。狭槽元素树的上一步：

从“react-dom/client”导入{createRoot}；从“@wordpress/components”导入{Popover}；从“导入内容”/内容'；const-app=document.getElementById（'app'）；const root=createRoot（app）；根.根.根(<div><内容/><波波。插槽/></div>);

道具

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

锚点：元素|VirtualElement|null

应该由使用的元素波波（Popover）作为它的锚。它可以是元素或者，也可以选择虚拟元素-即带有getBoundingClientRect（）和所有者文档定义了属性。

元素应以状态而不是纯ref存储，以确保在其更改时进行反应式更新。

• 必需：否

anchorRect：带所有者文档的DomRect

注意：此道具已弃用。请使用锚道具。

对象扩展DOMRect公司带有附加选装件所有者文档属性，用于指定固定的popover位置。

• 必需：否

anchorRef:Element | PopoverAnchorRefRefReference | Popover AnchorrefTopBottom |范围

注意：此道具已弃用。请使用锚道具。

用于指定固定的弹出位置。它可以是元素，对要素，一个带有顶部和a底部属性（均指向元素），或范围.

• 必需：否

动画：布尔

打开popover时是否应设置动画。

• 必需：否
• 违约：真的

子级：ReactNode

这个儿童作为popover内容呈现的元素。

• 必需：是

expandOnMobile:布尔值

在移动视口上全屏显示弹出窗口。

• 必需：否

翻转：布尔

指定如果在正常位置没有空间放置popover，则popover是否应在其轴上翻转。

当使用“顶部”位置时，翻盖将切换到“底部”位置。当使用“左”位置时，弹出窗口将切换到“右”位置。

翻转时，翻盖将保持“开始”或“结束”对齐。

• 必需：否
• 违约：真的

focusOnMount:'firstElement'|布尔值

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

指定真的值将聚焦容器。

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

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

onFocusOutside：（事件：SyntheticEvent）=>无效

当焦点离开打开的弹出窗口时调用的回调。只有当popover在特定情况下关闭时（例如，如果新的文档活动元素是popover可见性的内容或以其他方式控制popover的可见性）。

未提供时关闭时将改为调用回调。

• 必需：否

getAnchorRect:（fallbackReferenceElement:Element|null）=>DomRectWithOwnerDocument

注意：此道具已弃用。请使用锚道具。

返回与预期值相同的值的函数主持人Rectprop，用于指定动态popover位置。

• 必需：否

headerTitle:字符串

用于自定义在移动视口中将弹出窗口切换为全屏时显示的标题文本（请参阅在手机上展开道具）。

• 必需：否

isAlternate：布尔值

注意：此道具已弃用。请使用变体道具'工具栏'值。

用于为popover启用不同的视觉样式。

• 必需：否

无箭头：布尔

用于显示/隐藏指向popover锚点的箭头。

• 必需：否
• 违约：真的

偏移：数字

锚点和popover之间的距离（以px为单位）。

• 必需：否

onClose:（）=>无效

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

• 必需：否

位置：'top'|'top-start'|'op-end'|'right'|'reght-start'|'right-end'|'bottom'|'bottom-start''|'bottom-end'|'left'|'left-start` |'overlay'

用于指定popover相对于其锚点的位置。

覆盖是将popover放在引用元素上的特例。
请注意，其他与放置相关的道具可能不会出现例外情况。

• 必需：否
• 违约：“从下到下”

位置：[yAxis][xAxis][optionalCorner]

注意：使用安置如果可能的话，请使用道具。

指定popover相对于其锚点的位置的传统方法。

可能的值：

• Y轴:“顶部”|“中间”|“底部”
• X轴:“左”|“中”|“右”
• 角:“顶部”|“右侧”|“底部”|“左侧”
  
• 必需：否

调整大小：布尔值

调整弹出窗口的大小，以防止其内容在遇到视口边缘时消失。

• 必需：否
• 违约：真的

variant:'工具栏'|'未设置样式'

指定popover的样式。

保留默认样式的未定义状态。可能的值为：
–无风格的：弹出窗口基本上没有任何可见样式，没有背景、边框、轮廓或阴影，但仍显示弹出窗口内容。
–工具栏：没有立面，但与其他图元对比度高的样式。这与工具栏成分.

–必需：否