抽屉
Drawer
别名:抽屉侧滑面板滑出面板侧边抽屉侧拉页面汉堡菜单点开的面板手机上滑出来的面板
这是什么
从屏幕边缘（多为右侧或左侧）滑入、通常带遮罩的面板。比模态框轻：能承载较长内容又不离开当前页面， 关闭后原样回到上下文；移动端常以左滑导航或底部抽屉的形式出现。
交互实验室
试一试，再决定怎么用打开侧边面板，完成查看后关闭，再比较不同展开方向。
正在加载实验室…
使用时关注什么
- 01关闭入口应可见，模态抽屉还应支持 Esc。
- 02长内容在面板内部滚动，背景状态应保留。
✓ 适用场景
- 查看详情但不想离开列表（邮件、订单）
- 移动端承载侧边导航
- 快速编辑或筛选，且需要保留底层上下文
✕ 不适用场景
- 需要用户强制决策（改用模态框）
- 内容只有一两行（改用 popover 或 tooltip）
- 桌面端常驻导航（改用 sidebar）
常见形式
右侧滑入
Right edge
详情面板最常见方向
左侧滑入
Left edge
移动端导航抽屉常用
底部抽屉
Bottom sheet
移动端操作与筛选面板
实现要点
position: fixedtransform: translateX(100%)transitionz-indexoverflow-y: auto面板 fixed 定位在边缘，用 transform translateX 收起与展开（GPU 友好，避免动 width）； 遮罩同步淡入淡出。内部 overflow-y-auto 承载长内容，底部操作区吸底。 焦点管理与滚动锁定同模态框；Esc 关闭，移动端可加边缘滑动手势。
平台 API
<dialog>role="dialog"aria-modal="true"横向对比
查看完整对比 →相关概念
模态框Modal
覆盖在页面之上、带半透明遮罩的对话框，打断用户当前流程，要求先完成弹窗内的任务或决策。 遮罩阻断与底层页面的交互，焦点被暂时困在弹窗内，是容器类浮层中打断程度最高的一种。
组件替代方案侧边栏Sidebar
固定在页面一侧（通常左侧）的垂直导航区，承载产品的主要层级入口。 后台管理系统的事实标准：顶部放品牌与全局搜索，侧边栏放模块树，内容区专注任务。
组件相似概念气泡卡片Popover
点击触发元素后在其旁边弹出的非模态浮层，可承载文字说明、小型表单、日期选择等中等复杂内容。 无遮罩、不阻断页面其余部分，点击外部区域或 Esc 即关闭。
组件替代方案抽屉滑入Drawer Slide
面板从屏幕边缘（常为右侧或底部）滑入并带遮罩，像从抽屉里拉出来。 转场方向即空间隐喻：从边缘滑入表示"叠加的临时层"， 关闭时原路滑回，保持心智模型不换。
动效搭配使用