气泡浮层浮层
它贴着触发它的元素显示一小块临时内容,关闭后用户仍留在原来的上下文中。
- 从按钮旁边冒出来的小框
- 贴着我刚点的位置出现的内容
- 有个小尖角指着按钮的浮层
- 弹出浮层
- 锚点浮层
- 气泡面板
示例
Web / iOS / Android 对照
Web原生支持
支持 Popover API 的现代浏览器
Popover
popover attribute / showPopover()
浏览器负责顶层显示与轻触关闭;定位仍需锚点定位能力或样式配置。
iOS原生支持
iPadOS 原生;iPhone 可能适配为其他呈现方式
Popover
SwiftUI: popover|UIKit: UIPopoverPresentationController
Android需自己实现
Android 手机 / 平板
Popover
Material 3 没有通用 Popover 组件,菜单、提示和对话框各有专用组件,任意内容浮层需要自行组合。
通常怎么做:根据内容用途选 DropdownMenu、Tooltip 或 Dialog;不要把所有锚点浮层都叫菜单。
使用规范
什么时候用
- 展示与一个触发点直接相关的简短详情或少量控件
什么时候别用
- 手机窄屏上的长任务、重要确认或内容与触发点没有明确关系
容易混淆
给 AI 的提示词
这条词条还没有经过验证的实现提示词。