Создание компонента Notifications в Alpine.js

Уведомления нужны, чтобы показывать пользователю важную информацию: что действие прошло успешно, возникла ошибка или нужно обратить внимание. С Alpine.js и Tailwind CSS можно сделать простую и красивую систему уведомлений.

---

Полный пример кода

<div x-data="{
  notes: [],
  id: 0,
  add(msg, type='info') {
    this.id++;
    this.notes.push({ id: this.id, msg, type, show: true });
    setTimeout(() => this.remove(this.id), 5000);
  },
  remove(id) {
    const n = this.notes.find(x => x.id === id);
    if (n) n.show = false;
  }
}">
  <!-- Кнопки -->
  <div class="space-x-2 mb-4">
    <button @click="add('Все прошло успешно!', 'success')" class="px-3 py-2 bg-green-500 text-white rounded">Успех</button>
    <button @click="add('Что-то пошло не так!', 'error')" class="px-3 py-2 bg-red-500 text-white rounded">Ошибка</button>
    <button @click="add('Обратите внимание!', 'warning')" class="px-3 py-2 bg-yellow-500 text-white rounded">Предупреждение</button>
  </div>

  <!-- Уведомления -->
  <template x-for="n in notes" :key="n.id">
    <div 
      x-show="n.show"
      x-transition:enter="transition ease-out duration-300"
      x-transition:enter-start="opacity-0 -translate-y-2"
      x-transition:enter-end="opacity-100 translate-y-0"
      x-transition:leave="transition ease-in duration-200"
      x-transition:leave-start="opacity-100 translate-y-0"
      x-transition:leave-end="opacity-0 -translate-y-2"
      :class="{
        'bg-green-100 text-green-800 border-green-300': n.type === 'success',
        'bg-red-100 text-red-800 border-red-300': n.type === 'error',
        'bg-yellow-100 text-yellow-800 border-yellow-300': n.type === 'warning'
      }"
      class="mt-2 p-3 border rounded flex justify-between shadow">
      
      <span x-text="n.msg"></span>
      <button @click="remove(n.id)" class="ml-4 font-bold">✖</button>
    </div>
  </template>
</div>

---

Что здесь происходит

1. Обёртка x-data

Мы создаём объект, который управляет уведомлениями:

• notes: [] — список всех уведомлений,
• id: 0 — счётчик, чтобы у каждого уведомления был свой номер,
• add(msg, type) — добавляет новое уведомление,
• remove(id) — скрывает уведомление.

---

2. Кнопки

<button @click="add('Все прошло успешно!', 'success')">Успех</button>
<button @click="add('Что-то пошло не так!', 'error')">Ошибка</button>
<button @click="add('Обратите внимание!', 'warning')">Предупреждение</button>

При клике вызывается метод add(), который добавляет в список уведомление с текстом и типом.

---

3. Добавление уведомления

add(msg, type='info') {
  this.id++;
  this.notes.push({ id: this.id, msg, type, show: true });
  setTimeout(() => this.remove(this.id), 5000);
}

• Увеличиваем счётчик id.
• Добавляем новое уведомление в массив.
• Через 5 секунд оно автоматически скрывается (setTimeout).

---

4. Отображение уведомлений

<template x-for="n in notes" :key="n.id">
  <div x-show="n.show" ...>...</div>
</template>

• x-for перебирает все уведомления,
• x-show="n.show" показывает только активные,
• внутри выводится текст и кнопка ✖ для закрытия.

---

5. Стилизация разных типов

:class="{
  'bg-green-100 text-green-800 border-green-300': n.type === 'success',
  'bg-red-100 text-red-800 border-red-300': n.type === 'error',
  'bg-yellow-100 text-yellow-800 border-yellow-300': n.type === 'warning'
}"

В зависимости от типа (success, error, warning) уведомление получает разные цвета:

• зелёное — успех,
• красное — ошибка,
• жёлтое — предупреждение.

---

6. Закрытие уведомления

remove(id) {
  const n = this.notes.find(x => x.id === id);
  if (n) n.show = false;
}

Меняем show на false, и Alpine скрывает уведомление. Это можно сделать вручную (по кнопке ✖) или автоматически (через setTimeout).

---

7. Анимация появления/исчезновения

x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 -translate-y-2"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-2"

Эти классы дают плавное появление (снизу вверх и с прозрачности) и плавное исчезновение.

---

Итог

• Кнопка → добавляется уведомление нужного типа (успех, ошибка, предупреждение).
• Уведомление появляется плавно.
• Через 5 секунд оно исчезает само.
• Можно закрыть вручную кнопкой ✖.

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