Popup

Popup 组件是一个实用工具，可让您在工具提示和弹出框中显示内容。

import { Unstable_Popup as Popup } from '@mui/base/Unstable_Popup';
// or
import { Unstable_Popup as Popup } from '@mui/base';

通过阅读此关于最小化捆绑包大小的指南，了解它们之间的区别。

也提供了原生组件的 Props。

名称	类型	默认值	描述
anchor	HTML 元素 \| object \| func	-	一个 HTML 元素、虚拟元素，或一个返回其中之一的函数。它用于设置弹出框的位置。
container	HTML 元素 \| func	-	一个 HTML 元素或返回 HTML 元素的函数。容器会将 portal 子元素附加到其上。默认情况下，它使用顶层文档对象的 body，因此在这些情况下为 `document.body`。
disablePortal	bool	false	如果为 `true`，则弹出框将在定义它的位置渲染，而无需使用 portal。
keepMounted	bool	false	如果为 `true`，即使弹出框已关闭，它也会存在于 DOM 中。它的可见性将由 `visibility` CSS 属性控制。否则，关闭的弹出框将从 DOM 中移除。
middleware	Array<false \| { fn: func, name: string, options?: any }>	-	用于定位弹出框的 Floating UI 中间件集合。如果未提供，将使用 `offset` 和 `flip` 函数。
offset	func \| number \| { alignmentAxis?: number, crossAxis?: number, mainAxis?: number }	0	弹出框和触发元素之间的距离。当提供自定义 `middleware` 时，此 prop 将被忽略。
open	bool	false	如果为 `true`，则弹出框可见。
placement	'bottom-end' \| 'bottom-start' \| 'bottom' \| 'left-end' \| 'left-start' \| 'left' \| 'right-end' \| 'right-start' \| 'right' \| 'top-end' \| 'top-start' \| 'top'	'bottom'	确定相对于触发元素放置弹出框的位置。
slotProps	{ root?: func \| object }	{}	用于 Popup 内部每个 slot 的 props。
slots	{ root?: elementType }	{}	用于 Popup 内部每个 slot 的组件。可以是用于 HTML 元素的字符串或组件。有关更多详细信息，请参见下方的 Slots API。
strategy	'absolute' \| 'fixed'	'absolute'	要使用的 CSS position 属性的类型（absolute 或 fixed）。

ref 被转发到根元素。

要了解如何自定义 slot，请查看覆盖组件结构指南。

Slot 名称	类名	默认组件	描述
root	.base-Popup-root	`'div'`	渲染根元素的组件。

这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时，它们将应用于组件的 slot。

类名	描述
.base--open	当弹出框打开时，应用于根元素的类名。

Popup

Popup API

导入

Props

Slots

CSS 类