Drawer Slide
抽屉滑入
Aliases:抽屉滑入侧滑面板侧边栏滑出底部抽屉滑出层
What is it
A panel slides in from a screen edge — usually right or bottom — over a scrim, like pulling out a drawer. Direction carries the spatial metaphor: entering from the edge marks it as a temporary layer, and it exits back the same way, keeping the mental model intact.
Interactive playground
Try it. Make an informed choice.Loading demo…
✓ When to use
- Secondary content on mobile — filters, settings, detail sheets
- Side panels that must keep the main page in context
- Bottom sheets for quick mobile actions
✕ When not to use
- Unskippable tasks — drawers are dismissed on a whim
- Complex content needing room — use a page or modal
- Slide durations past 300ms — waits feel long
Variants
Right sheet
右侧滑入
X-axis motion — the desktop default
Bottom sheet
底部抽屉
Slides up on the Y axis — the mobile standard
Scrim fade
遮罩渐变
Scrim fades in with the panel for depth
Implementation
transform: translateX/Ycubic-bezier(0.32, 0.72, 0, 1)scrim opacitytransform-only (no reflow)Animate the panel transform from translateX(100%) (or translateY(100%)) to 0 over 260–300ms using the Material drawer curve cubic-bezier(0.32, 0.72, 0, 1); reverse on close. Fade the scrim opacity 0→1 in sync. Animate transform/opacity only to avoid reflow; lock body scroll and manage focus plus Esc-to-close while open.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Add a drawer-slide transition to the project (right-side filter drawer). Check existing drawer/modal components first; reuse their focus trap and scroll lock. Requirements: - transform slide 260–300ms with the Material drawer curve - Scrim fades in sync; close on Esc and scrim click - transform/opacity only, no layout shift - Respect prefers-reduced-motion (fall back to fades) - No new dependencies Run existing checks when done and list modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
A panel that slides in from a screen edge (usually right or left), usually with a backdrop. Lighter than a modal: it carries longer content without leaving the page, and closing restores the original context. On mobile it appears as a nav drawer or a bottom sheet.
ComponentsApplies toA dialog rendered above the page with a translucent backdrop that interrupts the current flow and demands a task or decision first. The backdrop blocks interaction with the underlying page and focus is temporarily trapped inside — the most disruptive of the overlay containers.
ComponentsApplies toA vertical navigation area pinned to one side of the page (usually the left), carrying the primary hierarchy of a product. The de facto standard of admin systems: brand and global search on top, module tree in the sidebar, content focused on the task.
ComponentsApplies toA non-modal layer that pops up beside its trigger on click, carrying medium-complex content such as text, a mini-form or a date picker. No backdrop and no blocking of the rest of the page; clicking outside or pressing Esc closes it.
ComponentsApplies to