跳到主要内容
Termlib

UI 组件 · 反馈

抽屉

Drawer

也叫：侧滑面板、Sheet、侧边弹出层、Offcanvas

从屏幕边缘滑出的面板，在不离开当前页面的情况下查看详情或填写表单。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

点击列表中的某一行时，从右侧滑出一个宽 480px 的抽屉显示详情，顶部有标题和关闭按钮，底部固定放「取消」「保存」按钮，点击遮罩或按 Esc 可关闭，内容过长时只滚动中间区域。

发给

01判断

你的内容是这样吗？

对照两列，确认抽屉是不是你要找的。

符合这些情况，用抽屉

  • 在列表页查看或编辑单条记录，希望保留列表上下文时
  • 表单字段较多，对话框放不下但又不值得跳新页面时
  • 需要临时展示辅助信息或一组筛选条件，用完即关时
  • 手机上从底部弹出一组选项或操作菜单时

是这些情况，换成别的

  • 只需要用户确认一句话时

    改用对话框气泡卡片

  • 内容是一个完整的独立流程，需要能分享链接或刷新后保留时

    改用分步向导

  • 需要同时对照查看多条记录时

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    抽屉里再弹抽屉，层层叠加，用户不知道该关哪个

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    宽度占满整个屏幕，失去了保留上下文的意义

  3. 03

    把常驻的主导航做成默认打开的抽屉，桌面端每次都要先关掉它

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由遮罩层和贴边滑出的面板组成，面板内有标题栏、可滚动内容区和底部操作栏。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1贴着屏幕右侧或底部边缘的高面板
  2. 2背后有半透明遮罩，另一侧仍能看到原页面的一部分
  3. 3顶部有标题和关闭图标，底部固定一排按钮

04解释

详细解释

抽屉从页面右侧（有时是左侧或底部）滑出，盖住一部分页面，背后通常有半透明遮罩。它比对话框更高、能容纳更多内容，中间内容区可以独立滚动，底部固定放操作按钮。shadcn/ui 里叫 Sheet，Bootstrap 里叫 Offcanvas，手机上从底部滑出的版本也常叫底部面板（Bottom Sheet）。

和 对话框 的区别：对话框居中、偏小，适合确认或短表单；抽屉贴边、偏高，适合查看一条记录的完整详情或编辑较长的表单，而且原来的列表仍露出一部分，用户不会丢失上下文。和 侧边菜单 的区别：侧边菜单是常驻的导航，抽屉是临时打开、用完就关的。

开发者信息
术语 ID
component-drawer
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-drawer-content-wrapper
  • .el-drawer
  • [class*="MuiDrawer-paper"]:not([class*="MuiDrawer-paperAnchorDocked"])
  • .arco-drawer
  • .t-drawer__content-wrapper
  • .n-drawer
  • [data-slot="sheet-content"]
  • [data-slot="drawer-content"]
  • .offcanvas
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • drawer
  • offcanvas
  • off-canvas
  • sheet
  • side-sheet
  • slide-over
  • slideover
  • side-drawer
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Drawer
  • Sheet
  • SlideOver
  • Offcanvas
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 浮在内容上
  • 贴边满高
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30