跳转到内容

前端与界面 · DEFINED TERM

Modal 与 Drawer

Modal 居中打断当前任务,Drawer 从边侧展开并保留更多页面上下文。

你可能会这样说“居中弹窗和侧边抽屉该怎么选”

VISUAL EXAMPLE

先看懂它怎么工作

MECHANISM

运行机制

  1. 触发打开
  2. 管理焦点
  3. 展示内容
  4. 关闭并恢复焦点

USE WHEN

适合这样用

比较两类浮层的任务中断程度与上下文保留方式

NOT FOR

不要这样理解

不要把两种模式混用,也不要为复杂长流程使用狭窄浮层

TELL YOUR AGENT

可直接发给 Agent

请按“Modal 与 Drawer”的概念处理这个需求:居中弹窗和侧边抽屉该怎么选。先说明实现边界,再给出可检查的结果。

ACCEPTANCE

怎么确认它真的做好了

选择符合任务长度与上下文需要的模式,可关闭、焦点不逃逸,移动端内容不被裁切

OFFICIAL SOURCES

官方来源