点列表行从右侧滑出抽屉，列表始终可见、半透明遮罩可点关闭；确认才更新那一行，取消/Esc 放弃——用户在比较多个项目时不会失去上下文。
先打开抽屉，再看列表行和焦点怎么变
一台项目列表详情抽屉实验台：点「打开详情抽屉」看它从所选侧滑出、背后列表仍可见；改标题或状态后分别走「确认保存/取消/Esc/点遮罩」四条出口，看列表行物件是否随确认更新、焦点是否回到触发按钮；切换「左侧/右侧」看滑出方向。
第 0 步：这是一份项目列表。点「打开详情抽屉」看它从所选侧滑出、背后列表仍可见；改标题或状态后分别试「确认保存」「取消」「Esc」「点遮罩」四条出口，观察列表行物件是否随确认更新、焦点是否回到触发按钮；切「左侧/右侧」看滑出方向。
滑出侧别
项目列表（始终可见）
活动报名页草稿
会员中心改版进行中
对照：抽屉未打开，列表行「活动报名页 · 草稿」是当前项目。原因：抽屉保留背后上下文，列表始终可见。下一步：点「打开详情抽屉」看它从所选侧滑出，或先切「左侧/右侧」改滑出方向。
从刚才的操作里提炼
你在实验台上看到的就是抽屉的核心；下面只是把它命名清楚。
- 抽屉从屏幕边缘滑出：实验台里切「右侧/左侧」后再打开，面板从对应边缘滑入——这是它与居中弹出的 modal 最直观的差别。
- 保留背后上下文：抽屉打开时列表行始终可见，半透明遮罩只降注意力、不完全遮挡；适合「边看边操作」的辅助任务。
- 三条关闭出口同属放弃，确认才提交：取消、Esc、点遮罩都把草稿丢掉、列表行不变；只有「确认保存」会更新列表行物件本身——结果长在物件上。
- 焦点有进有出：打开后焦点进入抽屉的标题输入框；关闭后焦点回到「打开详情抽屉」触发按钮，不丢失键盘位置。
- dialog 语义 + 半透明遮罩：容器用
role="dialog"、aria-modal="true"并关联标题与描述；遮罩比 modal 轻，点即可关。
什么时候用抽屉
从用户信号判断，也要分清它与 modal、popover、sidebar 的边界。
- 用：列表或表格行点开「看详情/轻编辑」，又不想离开主列表、想保留比较上下文。
- 用：侧层面板式的筛选、设置、帮助，用完即关，不需要常驻。
- 区分 Modal：需要居中遮罩、强制决策、打断主流程（如删除确认）时用 Modal；抽屉不打断、可边看边操作。
- 区分 Popover：锚点旁的轻量小气泡（如资料卡、行内提示）用 Popover；抽屉是大面积侧滑面板，常带遮罩。
- 区分 Sidebar：页面常驻布局、持久可见用 Sidebar；抽屉是临时唤出、用完关闭。
- 不用：高风险不可逆确认（→ Modal 或独立页）、整页结果（→ Result）、一闪而过的反馈（→ Toast）。
怎么用：从触发器到回到触发器的最短路径
一次到位的检查顺序。
- 定触发器：列表行或按钮打开抽屉；触发器要能重新获得焦点。
- 定侧别与宽度：按内容和空间选左/右（或上/下），窄屏可接近全屏，但仍留明确关闭入口。
- 加语义：抽屉容器用
role="dialog"、aria-modal="true"，关联标题与描述；背后内容用inert或焦点陷阱防止键盘误操作。 - 管焦点：打开后焦点进入抽屉首个控件；Esc、关闭按钮、点遮罩都能退出；关闭后焦点回到触发器。
- 分清出口语义：确认才提交并更新背后物件；取消/Esc/遮罩都放弃草稿；状态反馈说明结果，不只靠动画。
正反例：同一个「列表看项目详情」，只改一处
只改变「是否保留列表上下文」，看用户后果如何不同。
点同一行直接跳到独立详情页，列表消失了；想对比下一个项目得反复返回。或用居中 modal 盖住整屏，也遮掉了列表——这是 modal 的强制决策场景，不是抽屉的辅助查看。
快速自测
用户在抽屉里把标题改了，但点了「取消」。列表里那一行应该显示什么？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。