Popover
Popover 提供通用的锚定式顶层界面，用于展示非菜单、工具提示或模态对话框的自定义内容。
Popover 是可选组件。需要具有简单开关行为、轻触关闭和基础定位的小型锚定面板时，可以使用它。对于更丰富的交互模式，优先选择专用组件，例如 Menu、Tooltip、Dialog、DatePicker 或 TimePicker；也可以直接组合使用原生 Popover API 和库的样式令牌。
关闭生命周期
原生弹出层关闭时会触发 update:open(false)。之后的 closed 事件会等待 Popover 自身的退出动画结束，但不会等待插槽内容内部的动画。关闭期间请保留插槽内容，并在 closed 中释放。
Show API
Popover 已打开时调用 Popover.show({ source }) 会更新 source，不会关闭并重新打开 Popover，也不会触发开关生命周期。传入相同的 source 或省略 source 会保留当前 source。CSS 定位优先使用 anchorName 和 anchorElement；Popover 打开期间 anchorElement 变化也可更新位置。
示例
默认
受控模式
浮动表面
共享主题颜色、边框、阴影，以及包含嵌套菜单和对话框的交互式示例，请参阅浮动表面 token。
参考
结构
| 元素 | 部件 | 选择器 |
|---|---|---|
<div> | root | [data-scope="popover"][data-part="root"]鼠标左键单击复制 |
<div> | surface | [data-scope="popover"][data-part="surface"]鼠标左键单击复制 |
属性
| 名称 | 说明 | 默认值 | 控件 |
|---|---|---|---|
shape可选 | Corner style; inherits the shared shape default. M3Shape | undefined | - | - |
id可选 | Optional explicit id for the popover element. string | undefined | undefined | |
popover可选 | Native popover behavior. automanualhint | "auto" | |
placement可选 | Preferred placement relative to the anchor. bottom-startbottombottom-endtop-starttoptop-endstartstart-topstart-bottomendend-topend-bottom | "bottom-start" | |
anchorName可选 | CSS anchor name used to position the popover. string | undefined | undefined | |
anchorElement可选 | Element used as the position anchor and showPopover source. HTMLElement | undefined | undefined | - |
matchAnchorWidth可选 | Whether the popover surface should match the anchor width. boolean | undefined | false | |
role可选 | Accessible role for authored interactive content. string | undefined | undefined | |
ariaLabel可选 | Accessible label for the popover surface. string | undefined | undefined | |
ariaLabelledBy可选 | Element id that labels the popover surface. string | undefined | undefined | |
open可选 | - boolean | undefined | false |
事件2
| 名称 | 类型 | 说明 |
|---|---|---|
update:open | [value: boolean] | - |
closed | [] | - |
插槽1
| 名称 | 参数 | 说明 |
|---|---|---|
default | - | Popover content. |
样式8
| Token | 说明 |
|---|---|
--md-popover-container-colorColor回退值 var(--md-sys-color-surface-container) | Controls popover container color. |
--md-popover-container-elevationElevation回退值 var(--md-sys-elevation-level2) | Controls popover container elevation. |
--md-popover-container-shapeShape回退值 var(--md-shape-popover) | Controls popover container shape. |
--md-popover-max-heightLayout回退值 32rem | Controls popover maximum height. |
--md-popover-max-widthLayout回退值 28rem | Controls popover maximum width. |
--md-popover-min-widthLayout回退值 0rem | Controls popover minimum width. |
--md-popover-on-container-colorColor回退值 var(--md-sys-color-on-surface) | Controls popover content color. |
--md-popover-paddingLayout回退值 1rem | Controls popover content padding. |