成功消息提示

这是一个显示在屏幕边缘的 UI，用于通知用户用户的操作（保存、发送等）已成功完成。

预览

Successfully saved changes.

用例和功能

系统反馈：立即传达用户操作的成功结果，例如“已保存”或“提交已完成”。
异步进程通知：非常适合您希望在不干扰用户工作的情况下谨慎收到通知的情况，例如进程在后台完成时。
自动消失：通常在一段时间后自动淡出以释放屏幕空间。

设计和用户体验（Design & UX）的要点

谨慎放置：将其放置在屏幕的角落（例如右下角或右上角），这样就不会干扰主要内容或工作。
视觉清晰度：使用绿色（“祖母绿”或“绿色”）图标和边框来指示成功直观地传达积极的通知。
手动关闭功能：提供×（关闭）按钮，以便用户可以自行关闭通知，从而赋予他们更大的控制感。

如何定制（定制指南）

按状态着色：通过替换 Tailwind 类，您可以通过将颜色更改为红色 (red) 表示错误通知、黄色 (yellow) 表示警告、蓝色 (blue) 表示信息来响应各种条件。
添加动画：您可以使用CSS或JS添加显示时从底部滑入的动画或消失时淡出的动画。

实现代码（Implementation）

<div class="flex items-center w-full max-w-sm p-4 text-gray-800 bg-white dark:bg-zinc-900 dark:text-gray-200 rounded-lg shadow-lg border border-emerald-100 dark:border-emerald-900/30" role="alert">
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-emerald-500 bg-emerald-100 rounded-lg dark:bg-emerald-800/30 dark:text-emerald-400">
  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
  </svg>
</div>
<div class="ml-3 text-sm font-medium">Successfully saved changes.</div>
<button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-zinc-900 dark:hover:bg-zinc-800">
  <span class="sr-only">Close</span>
  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>