Snackbar
带操作提示条
WebMobileDesktop上手难度: 中等
和 Toast 长得差不多，但底部多了一个可选的操作按钮，比如「撤销」。
Live Demo
真的可以点当前：3 张
你刚才看到的这个：Gmail 删除邮件后底部弹出的「邮件已删除 · 撤销」、YouTube 关闭广告后底部的「广告已跳过 · 还原」——都带一个可点按钮。
它到底是什么
Snackbar 和 Toast 的唯一区别就是「能不能做一件事」。有了撤销按钮，它就成为执行危险操作后的安全网。这也是为什么 Google 坚持删除操作要给 Snackbar 而不是弹确认框。
snackbar操作条撤销条动作条material snackbar
Anatomy · 它由什么组成
Container容器
通常屏幕底部居中
Message消息
用被动语态：「邮件已删除」
Action操作按钮
如「撤销」「重试」
Duration时长
有撤销时给 5–10 秒
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 删除/移动等操作后提供撤销 | 用 |
| 操作已生效，用户可能想反悔 | 用 |
| 想避免「弹窗确认」打断用户 | 用 |
| 只是告知成功，没有任何后续动作 | 视情况 |
如果撤销窗口只有 3 秒，对重要内容来说太短——要么延长时间，要么用确认框。
底部有导航栏时，Snackbar 要上移，否则会被导航栏压住。
Similar Patterns
别搞混一句话区分：和 Toast 长得差不多，但底部多了一个可选的操作按钮，比如「撤销」。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
删除照片后底部显示 Snackbar「已删除 1 张照片」+「撤销」按钮，5 秒后自动消失；底部有导航时上移 80px。
不要只对 AI 说
Bad → Better不要这样对 AI 说
删除后提示一下。
改成这样说
删除后弹底部 Snackbar：「已删除 1 张照片」+「撤销」文字按钮，5 秒自动消失（悬停暂停倒计时），有底部导航时上移，role="status" + aria-live="polite"。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。