抽屉面板（Drawer / Sheet）是什么：效果预览与 AI 设计提示词

效果预览

购物车✕

适合用在哪

购物车、设置面板、详情预览、移动端筛选器（底部滑出叫 Bottom Sheet）。

容易踩的坑

底部抽屉没有预留 safe-area-inset-bottom，iPhone 上底部操作按钮被手势条遮住。
可拖拽把手只支持触摸，桌面端没有关闭按钮或 Esc，用户无法退出。
抽屉内容滚动到底继续滑动会带动背景页面滚动，需要 overscroll-behavior:contain。

设计提示词 · Prompt

抽屉面板（Drawer / Sheet）：从右侧滑出、占视口宽 380-480px（移动端 85-92vw）或从底部滑出（Bottom Sheet，占高 60-85%、顶部一枚拖拽把手条）。遮罩与模态相同。滑入 300ms cubic-bezier(.32,.72,0,1)，滑出稍快 240ms。内部：标题栏（标题 + 关闭）+ 可滚动内容 + 底部固定操作区。与模态的区别：抽屉暗示"主流程还在继续"，适合边看边操作；模态是"必须先处理我"。移动端列表项点击看详情，用 Bottom Sheet 体验最好。

Drawer / Sheet: slides in from the right, taking 380-480px of viewport width (85-92vw on mobile), or slides up from the bottom (Bottom Sheet, taking 60-85% of height, with a drag-handle bar at the top). The overlay is the same as a modal. Slides in over 300ms cubic-bezier(.32,.72,0,1), slides out slightly faster in 240ms. Inside: title bar (title + close) + scrollable content + a fixed action area at the bottom. Difference from a modal: a drawer implies "the main flow continues", suited to viewing and acting side by side; a modal says "deal with me first". On mobile, when tapping a list item to view details, a Bottom Sheet gives the best experience.

常见搭配

同一页面里经常和「抽屉面板」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

安全区适配Safe Area Insets 焦点锁定Focus Trap 产品卡片Product Card 筛选标签Filter Chips

演示 HTML 结构

<div class="s s--abs d-drawerstage">
  <div class="d-drawer2">
    <div class="d-drawer2__hd">购物车<span>✕</span></div>
    <span class="d-drawer2__ln" style="width:92%"></span>
    <span class="d-drawer2__ln" style="width:76%"></span>
    <div class="d-img d-img--warm" style="height:34px"></div>
    <span class="d-drawer2__ln" style="width:58%"></span>
  </div>
</div>