Уведомления с формами ввода

Для использования Toastify в проекте необходимо подключить библиотеку через npm или CDN. Установка через npm осуществляется командой:

npm install toastify-js

После установки подключение в Jav * aScript:

import Toastify from 'toastify-js';
import "toastify-js/src/toastify.css";

Для CDN подключение выглядит следующим образом:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

Это позволяет использовать объект Toastify для создания уведомлений с минимальными усилиями.

Создание простого уведомления с кнопкой

Toastify позволяет добавлять интерактивные элементы в уведомления, включая кнопки и формы ввода. На базовом уровне уведомление создается через метод Toastify() с передачей конфигурации:

Toastify({
  text: "Это простое уведомление",
  duration: 3000,
  close: true,
  gravity: "top",
  position: "right",
  backgroundColor: "#4CAF50",
}).showToast();

Параметры:

  • text — текст уведомления. Можно использовать HTML для добавления интерактивных элементов.
  • duration — время отображения в миллисекундах.
  • close — добавление кнопки закрытия.
  • gravity — положение по вертикали (top или bottom).
  • position — положение по горизонтали (left, center, right).
  • backgroundColor — цвет фона уведомления.

Встраивание формы ввода

Форма ввода создается с помощью HTML-кода, передаваемого в text. Например, для простого текстового поля с кнопкой подтверждения:

const inputForm = `
  <form id="toastForm">
    <input type="text" id="userInput" placeholder="Введите текст" />
    <button type="submit">Отправить</button>
  </form>
`;

const toast = Toastify({
  node: document.createElement('div'),
  duration: -1,
  gravity: "top",
  position: "center",
  backgroundColor: "#2196F3",
});

toast.showToast();
toast.getToast().appendChild(document.createRange().createContextualFragment(inputForm));

document.getElementById('toastForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const value = document.getElementById('userInput').value;
  console.log("Введено:", value);
  toast.hideToast();
});

Особенности:

  • Использование duration: -1 делает уведомление постоянным до закрытия пользователем.
  • node позволяет вставить кастомный HTML-контейнер для формы.
  • Событие submit используется для обработки данных формы.

Настройка внешнего вида и анимации

Toastify поддерживает кастомизацию через CSS и встроенные свойства:

Toastify({
  node: document.createElement('div'),
  duration: -1,
  gravity: "bottom",
  position: "left",
  backgroundColor: "linear-gradient(to right, #ff6a00, #ee0979)",
  stopOnFocus: true,
}).showToast();

Ключевые параметры для кастомизации:

  • stopOnFocus — при наведении мыши уведомление не скрывается.
  • style — можно передавать объект с CSS-свойствами:
style: {
  borderRadius: "10px",
  fontSize: "16px",
  padding: "10px 20px"
}
  • Анимация появления и скрытия может быть задана через CSS-классы или с помощью встроенных параметров Toastify.

Многоуровневые формы и динамическое обновление

Для сложных форм можно динамически изменять содержимое уведомления без его закрытия:

const toastNode = document.createElement('div');
Toastify({ node: toastNode, duration: -1, backgroundColor: "#673AB7" }).showToast();

toastNode.innerHTML = `
  <form id="multiStepForm">
    <input type="text" id="step1" placeholder="Шаг 1" />
    <button id="nextStep" type="button">Далее</button>
  </form>
`;

document.getElementById('nextStep').addEventListener('click', () => {
  const stepValue = document.getElementById('step1').value;
  toastNode.innerHTML = `
    <form id="step2Form">
      <p>Вы ввели: ${stepValue}</p>
      <input type="text" id="step2" placeholder="Шаг 2" />
      <button type="submit">Завершить</button>
    </form>
  `;

  document.getElementById('step2Form').addEventListener('submit', function(e) {
    e.preventDefault();
    const finalValue = document.getElementById('step2').value;
    console.log("Результат формы:", { step1: stepValue, step2: finalValue });
    toast.hideToast();
  });
});

Преимущества такого подхода:

  • Возможность создания многоступенчатых форм прямо в уведомлении.
  • Динамическое обновление контента без пересоздания Toastify.
  • Полная интеграция с событиями JavaScript и обработкой данных пользователя.

Работа с колбэками и событиями

Toastify поддерживает колбэки для обработки различных событий:

Toastify({
  text: "Форма для ввода",
  duration: -1,
  onClick: () => console.log("Уведомление кликнуто"),
  onShow: () => console.log("Уведомление показано"),
  onHide: () => console.log("Уведомление скрыто"),
}).showToast();
  • onClick — срабатывает при клике на уведомление.
  • onShow — вызывается сразу после показа.
  • onHide — вызывается после скрытия.

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

Использование с фреймворками

Toastify легко интегрируется с фреймворками вроде React, Vue, Angular:

  • В React создается контейнер через useRef и вставляется через node.
  • В Vue можно использовать v-html для динамического добавления формы в уведомление.
  • В Angular управление DOM осуществляется через Renderer2 и привязку событий.

Такой подход позволяет создавать интерактивные уведомления, которые полностью соответствуют архитектуре приложения.

Советы по UX

  • Уведомления с формами должны быть не слишком длинными, иначе пользователь может игнорировать их.
  • Использовать duration: -1 для форм, чтобы пользователь успел ввести данные.
  • Предусматривать возможность отмены или закрытия уведомления, чтобы не блокировать интерфейс.

Это обеспечивает удобное и безопасное взаимодействие с пользователем при использовании интерактивных уведомлений в JavaScript через Toastify.

Оглавление