COMPONENT 41 · Feedback & Status
底部操作通知
Snackbar
也叫Action ToastBottom Toast操作提示条Material Snackbar
通常出现在底部的短暂消息，并可带一个相关操作。
A temporary message, usually near the bottom, with an optional contextual action.
ANATOMY & USAGE
结构与使用建议
组成部分
- 消息文字
- 单一操作
- 临时容器
适合使用
- 刚完成的操作可撤销或有一个清晰后续动作时。
不建议使用
- 需要多个按钮、长说明或阻止后续流程时。
键盘与无障碍
- 消息由 status 区域播报；操作可键盘访问，超时不能让用户失去关键机会。
DESCRIBE IT TO AI
这样告诉编程助手
实现底部操作通知（Snackbar）：通常出现在底部的短暂消息，并可带一个相关操作。
MINIMAL RUNNABLE CODE
可复制代码
原生与 React 两套实现，不依赖第三方组件库。
READ ONLY · SAFE TO COPY
<div class="demo" role="status">
<strong>底部操作通知</strong>
<p>通常出现在底部的短暂消息，并可带一个相关操作。</p>
<button type="button">知道了</button>
</div>