组件 · 浮层 · 31
抽屉 抽屉 = 固定在屏幕边缘的 320 像素面板，背后有遮罩，原页面依然可见。
直达修改 Prompt →
怎么向 AI 描述它 复制 Prompt
基础 修改 进阶
Create a drawer component.
STYLE
- 320px panel anchored right, full height, 16px radius on the leading edge
- #FFFFFF surface over a #1D1D1F 32% scrim
- header 16px 600 with a close icon, body scrolls, footer sticks
- slides in 240ms ease-out, closes in 180ms ease-in
STATES
- closed, opening, open with scrim, closing
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui
Make the existing drawer sticky-footer.
Use:
- a footer pinned to the bottom of the panel with a 1px top border
- the body scrolls on its own between header and footer
- keep the width, scrim and motion unchanged
Only add the sticky footer.
Create a drawer component, replacing the existing one.
Requirements:
- 320px panel from the right; left and bottom variants share the pattern
- white surface, scrim #1D1D1F at 32%, click-outside closes
- header with a close icon, scrolling body, sticky footer for actions
- 240ms ease-in open, 180ms ease-out close
- focus moves into the panel and returns to the trigger on close
Keep the underlying page visible while the drawer is open.
MOTION
- Slide from the edge: 240ms ease-out. This is the one place a long travel is earned.
- Scrim: 200ms fade. Exit: 200ms.
- While the finger is dragging, no easing at all — the panel tracks the pointer directly.
- prefers-reduced-motion: replace the slide with a 120ms fade.
修改类 Prompt 只动目标，不碰页面其余部分。
抽屉是什么？ 抽屉从边缘滑入，页面仍可见。点名从哪一边进、多宽，以及如何关闭。
变体 点击属性即可在预览中高亮。
右侧 在 Prompt 里写明这个类型。
左侧 在 Prompt 里写明这个类型。
底部 在 Prompt 里写明这个类型。
边缘 给具体值，不要只给感觉词。
宽度 面的横向尺寸（模态最大宽度、侧边栏宽度）。
遮罩 模态框后方的变暗遮罩层，用于阻断页面。
头部 给具体值，不要只给感觉词。
吸底页脚 给具体值，不要只给感觉词。 状态 点击属性即可在预览中高亮。
关闭 在 Prompt 里写明这个状态。
打开中 在 Prompt 里写明这个状态。
打开 菜单、下拉或对话框展开可见时的状态。
关闭中 在 Prompt 里写明这个状态。 结构解剖 这些是 Prompt 里应该点名的部件。
01 遮罩 02 面板 03 头部 04 内容区 05 页脚 什么时候用 详情面板，背后的列表仍可见 窄屏上的筛选器 小视口的导航 什么时候别用 决定只是是与非——改用对话框 内容简短且需要居中——改用模态框 需要同时打开第二个面板 A drawer is for context, not decisions — if the user must answer yes or no, that is a dialog, not a panel.
复制 Prompt Create a drawer component.
STYLE
- 320px panel anchored right, full height, 16px radius on the leading edge
- #FFFFFF surface over a #1D1D1F 32% scrim
- header 16px 600 with a close icon, body scrolls, footer sticks
- slides in 240ms ease-out, closes in 180ms ease-in
STATES
- closed, opening, open with scrim, closing
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui