Закрытие по ID

В библиотеке iziToast каждая всплывающая подсказка (toast) может быть идентифицирована уникальным идентификатором (ID). Использование ID позволяет точно управлять отображением и закрытием уведомлений, особенно когда на странице одновременно существует несколько тостов одного типа.

Задание ID уведомлению

При создании уведомления через метод iziToast.show() можно указать параметр id. Этот идентификатор должен быть уникальным для всех активных уведомлений на странице. Пример:

iziToast.show({
    id: 'myUniqueToast',
    title: 'Информация',
    message: 'Это уведомление с уникальным ID',
    position: 'topRight'
});
  • id — строка, задающая уникальный идентификатор уведомления.
  • title — заголовок уведомления.
  • message — текст уведомления.
  • position — расположение тоста на экране (topRight, topLeft, bottomRight, bottomLeft, center).

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

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

Для закрытия уведомления используется метод iziToast.destroy(id). Если указать ID, будет закрыт только конкретный тост. Пример:

iziToast.destroy('myUniqueToast');

Особенности работы:

  • Если уведомление с указанным ID существует, оно закрывается немедленно.
  • Если уведомление с таким ID отсутствует, вызов метода не вызывает ошибок.
  • Этот способ предпочтителен для точечного управления уведомлениями на странице с множеством тостов.

Пример использования в реальном сценарии

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

// Показ уведомления о начале загрузки
iziToast.show({
    id: 'uploadToast',
    title: 'Загрузка',
    message: 'Файл загружается...',
    position: 'topRight',
    timeout: false,  // уведомление будет висеть до закрытия вручную
    close: false     // убираем стандартную кнопку закрытия
});

// По завершении загрузки
function onUploadComplete() {
    iziToast.destroy('uploadToast'); // закрытие уведомления
    iziToast.success({
        title: 'Готово',
        message: 'Файл успешно загружен',
        position: 'topRight'
    });
}

В этом примере уведомление с ID 'uploadToast' появляется на весь период загрузки и автоматически закрывается после завершения процесса.

Использование с другими методами iziToast

Метод закрытия по ID совместим с:

  • iziToast.success(), iziToast.error(), iziToast.info(), iziToast.warning() — все эти методы создают уведомления, которым также можно присвоить ID через параметр id.
  • iziToast.show() с кастомными параметрами — позволяет полностью контролировать поведение уведомления и управлять им через ID.

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

iziToast.show({ id: 'first', message: 'Первый тост' });
iziToast.show({ id: 'second', message: 'Второй тост' });

// Закрыть первый
iziToast.destroy('first');

// Второй остаётся видимым

Важные рекомендации

  • Уникальные ID — каждый ID должен быть уникален, иначе iziToast.destroy() закроет только первое совпадение.
  • Управление временем жизни — для уведомлений, которые должны оставаться на экране до определенного события, рекомендуется использовать timeout: false и закрывать вручную через destroy(id).
  • Совместимость с динамическими уведомлениями — если уведомления создаются динамически в цикле или по событиям, присваивайте уникальные ID с использованием индексов или случайных строк, чтобы избежать конфликтов.

Генерация уникальных ID

Для динамических уведомлений удобно генерировать уникальные ID программно:

function generateToastID(prefix = 'toast') {
    return prefix + '_' + Math.random().toString(36).substr(2, 9);
}

let toastID = generateToastID();
iziToast.show({
    id: toastID,
    message: 'Динамический тост с уникальным ID'
});

Такой подход предотвращает случайное закрытие нескольких уведомлений и облегчает управление большим количеством тостов на странице.

Оглавление