Toast-уведомление об успехе

Это пользовательский интерфейс, который отображается на краю экрана и уведомляет пользователя об успешном завершении действия пользователя (сохранение, отправка и т. д.).

Предварительный просмотр

Варианты использования и возможности

• Отзыв системы: немедленно сообщает результаты успешных действий пользователя, например «Сохранено» или «Отправка завершена».
• Асинхронное уведомление о процессе: идеально подходит для случаев, когда вы хотите получать уведомления незаметно, не мешая работе пользователя, например, когда процесс завершился в фоновом режиме.
• Автоматическое исчезновение: обычно автоматически исчезает через определенный период времени, чтобы освободить место на экране.

##Ключевые моменты дизайна и UX (Design&UX)

• Незаметное размещение: разместите его в углу экрана (например, в правом нижнем или правом верхнем углу), чтобы он не мешал основному содержимому или работе.
• Визуальная четкость: используйте зеленые («изумрудные» или «зеленые») значки и рамки, чтобы указать на успех, чтобы интуитивно сообщать положительные уведомления.
• Функция ручного закрытия.Предоставляет кнопку × (закрыть), позволяющую пользователям самостоятельно закрывать уведомления, что дает им больше контроля.

Как настроить (Руководство по настройке)

• Цвет по статусу: заменив класс Tailwind, вы можете реагировать на различные условия, изменяя цвет на красный («красный») для уведомлений об ошибках, желтый («желтый») для предупреждений и синий («синий») для информации.
• Добавление анимации. С помощью CSS или JS вы можете добавить анимацию, которая скользит снизу при отображении, или плавно исчезающую анимацию при ее исчезновении.

Код реализации (Реализация)

<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>