Показ скрытых уведомлений

Для работы с iziToast необходимо подключить библиотеку к проекту. Это можно сделать через CDN или через менеджер пакетов npm/yarn.

Подключение через CDN:

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

Подключение через npm:

npm install izitoast
import iziToast from 'izitoast';
import 'izitoast/dist/css/iziToast.min.css';

После подключения можно использовать объект iziToast для создания уведомлений.

Основные параметры уведомлений

iziToast позволяет гибко настраивать уведомления. Ключевые параметры:

  • title — заголовок уведомления.
  • message — основной текст.
  • position — положение на экране: topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter.
  • timeout — время отображения в миллисекундах. Для скрытых уведомлений важно установить значение 0 или false, чтобы уведомление не исчезало автоматически.
  • close — отображение кнопки закрытия (true/false).
  • progressBar — отображение полосы прогресса (true/false).
  • theme — тема уведомления: light, dark, colored.

Пример базового уведомления:

iziToast.show({
    title: 'Информация',
    message: 'Это уведомление будет отображаться до закрытия пользователем',
    position: 'topRight',
    timeout: 0,
    close: true,
    progressBar: true,
    theme: 'light'
});

Показ скрытых уведомлений

Скрытые уведомления — это уведомления, которые остаются на экране до явного закрытия пользователем или через программный вызов. Для этого используются параметры:

  • timeout: 0 — запрещает автоматическое скрытие.
  • close: true — добавляет кнопку для ручного закрытия.
  • overlay: true — можно использовать затемнение фона для визуального выделения уведомления.
  • id — уникальный идентификатор уведомления, необходим для управления его закрытием программно.

Пример создания скрытого уведомления с уникальным идентификатором:

iziToast.show({
    id: 'persistentNotification',
    title: 'Важно',
    message: 'Это уведомление не исчезнет автоматически',
    position: 'topRight',
    timeout: 0,
    close: true,
    overlay: true,
    progressBar: true
});

Программное закрытие уведомлений

Для скрытых уведомлений важно уметь управлять их закрытием через код. Для этого используются методы:

  • iziToast.hide({ id: 'идентификатор' }) — скрывает конкретное уведомление.
  • iziToast.destroy() — закрывает все уведомления одновременно.

Пример закрытия конкретного уведомления:

// Показываем уведомление
iziToast.show({
    id: 'persistentNotification',
    title: 'Внимание',
    message: 'Это уведомление будет закрыто через 5 секунд',
    timeout: 0,
    close: true
});

// Закрываем через 5 секунд
setTimeout(() => {
    iziToast.hide({ id: 'persistentNotification' });
}, 5000);

Настройка внешнего вида скрытых уведомлений

Для повышения визуальной выразительности можно использовать дополнительные параметры:

  • backgroundColor — цвет фона уведомления.
  • color — цвет текста.
  • icon — иконка уведомления (icon: 'fa fa-info-circle').
  • layout — можно изменять структуру уведомления (1 или 2 для вертикального/горизонтального отображения элементов).
  • transitionIn / transitionOut — анимации появления и скрытия (fadeIn, fadeOut, bounceInRight и др.).

Пример кастомного скрытого уведомления:

iziToast.show({
    id: 'customNotification',
    title: 'Срочно',
    message: 'Пользователь должен закрыть уведомление самостоятельно',
    timeout: 0,
    close: true,
    overlay: true,
    position: 'bottomLeft',
    theme: 'colored',
    color: '#ffffff',
    backgroundColor: '#ff0000',
    icon: 'fa fa-exclamation-triangle',
    transitionIn: 'bounceInLeft',
    transitionOut: 'fadeOut'
});

Управление множественными скрытыми уведомлениями

Если требуется показывать несколько уведомлений одновременно:

  • Использовать уникальные id для каждого уведомления.
  • Для контроля всех уведомлений применять iziToast.destroy() или сохранять ссылки на id.

Пример управления несколькими уведомлениями:

iziToast.show({ id: 'notif1', title: 'Первое', message: 'Ожидание действия', timeout: 0 });
iziToast.show({ id: 'notif2', title: 'Второе', message: 'Ожидание действия', timeout: 0 });

// Закрыть все через 10 секунд
setTimeout(() => {
    iziToast.destroy();
}, 10000);

Использование событий уведомлений

iziToast поддерживает события, которые позволяют реагировать на действия пользователя:

  • onOpening — срабатывает при начале открытия.
  • onOpened — после появления уведомления.
  • onClosing — при начале скрытия.
  • onClosed — после скрытия.

Пример с обработкой событий:

iziToast.show({
    id: 'eventNotification',
    title: 'Событие',
    message: 'Слежение за действиями пользователя',
    timeout: 0,
    close: true,
    onOpened: function() {
        console.log('Уведомление открыто');
    },
    onClosed: function() {
        console.log('Уведомление закрыто');
    }
});

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

Заключение по использованию скрытых уведомлений

Скрытые уведомления в iziToast реализуются через комбинацию параметров timeout: 0 и close: true. Управление ими можно вести как вручную, так и программно через id или глобальные методы destroy(). Кастомизация внешнего вида и подключение событий открывает полный контроль над поведением и отображением уведомлений, обеспечивая высокую интерактивность интерфейса.

Оглавление