覆盖面板

覆盖面板（也称为弹出框）是一个容器组件，可以在页面上覆盖其他组件。

导入#


import { OverlayPanel } from 'primereact/overlaypanel';

基本用法#

通过其引用访问 OverlayPanel，并使用目标事件的toggle、show 和 hide 方法控制其可见性。


<Button type="button" icon="pi pi-image" label="Image" onClick={(e) => op.current.toggle(e)} />
<OverlayPanel ref={op}>
    <img src="/images/product/bamboo-watch.jpg" alt="Bamboo Watch"></img>
</OverlayPanel>

数据表格#

一个示例，在弹出窗口中显示一个数据表格以选择一个项目。启用 closeOnEscape 以在按下 ESC 键时关闭弹出窗口。当 dismissable 属性设置为 false 时，当文档在弹出窗口外部被单击时不会关闭弹出窗口。


<Toast ref={toast} />
<Button type="button" icon="pi pi-search" label="Search" onClick={(e) => op.current.toggle(e)} />
{selectedProductContent}
<OverlayPanel ref={op} showCloseIcon>
    <DataTable value={products} selectionMode="single" paginator rows={5} selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)}>
        <Column field="name" header="Name" sortable style={{minWidth: '12rem'}} />
        <Column header="Image" body={imageBody} />
        <Column field="price" header="Price" sortable body={priceBody} style={{minWidth: '8rem'}} />
    </DataTable>
</OverlayPanel>

无障碍性#

屏幕阅读器

OverlayPanel 组件使用 dialog 角色，并且由于任何属性都传递给根元素，你可以定义诸如 aria-label 或 aria-labelledby 之类的属性来描述弹出窗口的内容。此外 aria-modal 是添加的，因为焦点保持在弹出窗口内。

建议使用可以通过键盘访问的触发器组件，例如按钮，如果没有添加 tabIndex 将是必要的。 OverlayPanel 将 aria-expanded 状态属性和 aria-controls 添加到触发器，以便定义触发器和弹出窗口之间的关系。

OverlayPanel 键盘支持

当弹出窗口打开时，第一个可聚焦元素会接收焦点，并且可以通过将 autofocus 添加到弹出窗口内的元素来自定义此行为。

键	功能
tab	将焦点移动到弹出窗口内的下一个可聚焦元素。
shift + tab	将焦点移动到弹出窗口内的上一个可聚焦元素。
escape	关闭弹出窗口并将焦点移动到触发器。

关闭按钮键盘支持

键	功能
enter	关闭弹出窗口并将焦点移动到触发器。
space	关闭弹出窗口并将焦点移动到触发器。