Учебник SweetAlert

Введение
- Что такое SweetAlert
- История и эволюция библиотеки
- Преимущества перед стандартными диалоговыми окнами
- Когда использовать SweetAlert
- Системные требования и совместимость
Установка и подключение
- Установка через npm
- Установка через yarn
- Подключение через CDN
- Загрузка и локальное размещение файлов
- Проверка корректности подключения
- Работа с различными версиями библиотеки
Базовые концепции
- Структура всплывающих окон
- Жизненный цикл алерта
- Основные параметры конфигурации
- Цепочка промисов
- Обработка пользовательских действий
Первые шаги
- Простейший алерт
- Алерт с заголовком и текстом
- Типы сообщений
- Иконки и их настройка
- Кнопки подтверждения
Конфигурация окон
- Параметр title
- Параметр text и html
- Параметр icon
- Параметр showCancelButton
- Параметр confirmButtonText
- Параметр cancelButtonText
- Параметр confirmButtonColor
- Параметр cancelButtonColor
- Параметр timer
- Параметр timerProgressBar
- Параметр showCloseButton
- Параметр allowOutsideClick
- Параметр allowEscapeKey
- Параметр allowEnterKey
- Параметр backdrop
Работа с кнопками
- Настройка текста кнопок
- Изменение цвета кнопок
- Кастомные классы для кнопок
- Кнопка отмены
- Дополнительная третья кнопка
- Отключение кнопок
- Фокус на кнопках
- Обработка нажатий
HTML-контент в алертах
- Использование параметра html
- Вставка изображений
- Форматирование текста
- Встраивание видео
- Работа с таблицами
- Безопасность при работе с HTML
Формы ввода
- Текстовые поля
- Поля email
- Поля password
- Числовые поля
- Текстовые области
- Выпадающие списки
- Чекбоксы
- Радиокнопки
- Диапазоны
- Файловые поля
- Валидация введенных данных
- Предзаполнение полей
- Получение значений из формы
Модальные диалоги подтверждения
- Простое подтверждение действия
- Подтверждение с описанием последствий
- Двухэтапное подтверждение
- Подтверждение с вводом текста
- Обработка результата подтверждения
Типизированные сообщения
- Success-сообщения
- Error-сообщения
- Warning-сообщения
- Info-сообщения
- Question-сообщения
- Кастомные иконки
Стилизация и темизация
- Переопределение стандартных стилей
- Создание собственной темы
- Работа с CSS-классами
- Параметр customClass
- Адаптация под дизайн проекта
- Responive-дизайн
Анимации
- Типы анимаций появления
- Типы анимаций исчезновения
- Параметры showClass и hideClass
- Отключение анимаций
- Кастомные анимации через CSS
- Производительность анимаций
Позиционирование
- Центрирование окна
- Позиция сверху
- Позиция снизу
- Позиция слева
- Позиция справа
- Параметр position
- Тосты и уведомления
Прогресс-индикаторы
- Таймер с визуализацией
- Прогресс-бар
- Автозакрытие по таймеру
- Управление таймером
- Остановка и возобновление таймера
Очереди и последовательности
- Цепочка алертов
- Управление очередью
- Переход между шагами
- Отмена последовательности
Асинхронные операции
- Работа с промисами
- Обработка async/await
- Показ загрузки во время запроса
- Обработка ошибок
- Таймауты для долгих операций
Миксины
- Создание миксина
- Параметры миксина
- Переиспользование конфигурации
- Тосты на основе миксинов
- Множественные миксины
Хуки жизненного цикла
- beforeOpen
- open
- willClose
- afterClose
- didDestroy
- didOpen
- willOpen
- Практическое применение хуков
Методы управления
- Swal.fire()
- Swal.close()
- Swal.getTitle()
- Swal.getContent()
- Swal.getHtmlContainer()
- Swal.getImage()
- Swal.getIcon()
- Swal.getActions()
- Swal.getConfirmButton()
- Swal.getCancelButton()
- Swal.enableButtons()
- Swal.disableButtons()
- Swal.showLoading()
- Swal.hideLoading()
- Swal.isLoading()
- Swal.clickConfirm()
- Swal.clickCancel()
- Swal.update()
- Swal.isVisible()
Валидация и обработка ошибок
- Встроенная валидация
- Кастомная валидация
- Параметр inputValidator
- Асинхронная валидация
- Вывод сообщений об ошибках
- Параметр validationMessage
- Обработка некорректного ввода
Доступность
- ARIA-атрибуты
- Навигация с клавиатуры
- Поддержка скринридеров
- Фокус и tab-индексы
- Семантическая разметка
Интернационализация
- Локализация текстов кнопок
- Поддержка RTL
- Многоязычные сообщения
- Форматирование дат и чисел
Интеграция с фреймворками
- Использование в React
- Использование в Vue
- Использование в Angular
- Использование в Svelte
- TypeScript-определения
Оптимизация и производительность
- Ленивая загрузка
- Минификация
- Tree shaking
- Уменьшение размера бандла
- Производительность на мобильных устройствах
Расширенные сценарии
- Многошаговые формы
- Динамическое содержимое
- Интеграция с API
- Уведомления в реальном времени
- Сложные формы с множественными полями
- Условная логика отображения
Отладка и тестирование
- Инструменты разработчика
- Логирование событий
- Юнит-тестирование
- E2E-тестирование
- Частые ошибки и их решение
Миграция между версиями
- Отличия версий 1.x и 2.x
- Миграция с SweetAlert на SweetAlert2
- Breaking changes
- Deprecated функции
- Обновление legacy-кода
Безопасность
- XSS-атаки и защита
- Санитизация HTML
- Content Security Policy
- Безопасная работа с пользовательским вводом
Альтернативы и сравнение
- Сравнение с toastr
- Сравнение с Notiflix
- Сравнение с AlertifyJS
- Сравнение со стандартными диалогами
- Выбор подходящей библиотеки