跳转到内容

前端与界面 · DEFINED TERM

Popover 气泡面板

由某个控件触发、承载少量交互内容的浮层。

你可能会这样说“点筛选图标后弹出几个选项,点外面自动关闭。”

VISUAL EXAMPLE

先看懂它怎么工作

界面状态示例

等待操作

MECHANISM

运行机制

  1. 触发定位
  2. 打开浮层
  3. 处理内部交互
  4. 失焦关闭

USE WHEN

适合这样用

快捷筛选、小菜单和简短设置

NOT FOR

不要这样理解

复杂表单和长文档不适合放进气泡面板

TELL YOUR AGENT

可直接发给 Agent

请按“Popover 气泡面板”的概念处理这个需求:点筛选图标后弹出几个选项,点外面自动关闭。。先说明实现边界,再给出可检查的结果。

ACCEPTANCE

怎么确认它真的做好了

浮层不越界,焦点顺序合理,点击外部和 Esc 均可关闭

OFFICIAL SOURCES

官方来源