Создание собственных типов

iziToast предоставляет удобный способ отображения уведомлений на веб-страницах, позволяя не ограничиваться стандартными типами (success, error, info, warning). Создание собственных типов уведомлений расширяет возможности интерфейса, делая сообщения более информативными и стилистически согласованными с дизайном проекта.

Определение собственного типа

Для создания нового типа уведомления используется функция iziToast.settings() или передача параметра class при вызове уведомления. Пример базовой структуры кастомного типа:

iziToast.show({
    title: 'Успех!',
    message: 'Операция выполнена успешно',
    class: 'my-custom-toast',
    icon: 'fa fa-check',
    color: '#4caf50',
    position: 'topRight'
});

Ключевые параметры:

  • class — уникальный CSS-класс, который будет применён к уведомлению.
  • icon — иконка, отображаемая слева от текста.
  • color — цвет фона уведомления.
  • position — позиция на экране (topRight, bottomLeft и др.).
  • title и message — основной текст уведомления.

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

Расширение стандартных типов

iziToast позволяет расширять стандартные типы с помощью функции iziToast.settings():

iziToast.settings({
    myCustomType: {
        class: 'my-custom-toast',
        icon: 'fa fa-star',
        color: '#ff9800'
    }
});

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

iziToast.myCustomType({
    title: 'Особое уведомление',
    message: 'Это уведомление использует собственный тип'
});

Динамическая настройка уведомлений

Создание собственных типов не ограничивается статическим определением цвета и иконки. Параметры можно задавать динамически в зависимости от контекста:

function showCustomToast(type, message) {
    let settings = {
        title: 'Сообщение',
        message: message,
        position: 'topRight'
    };

    switch(type) {
        case 'warning':
            settings.class = 'my-warning-toast';
            settings.icon = 'fa fa-exclamation';
            settings.color = '#ff5722';
            break;
        case 'success':
            settings.class = 'my-success-toast';
            settings.icon = 'fa fa-check-circle';
            settings.color = '#4caf50';
            break;
        default:
            settings.class = 'my-default-toast';
            settings.icon = 'fa fa-info-circle';
            settings.color = '#2196f3';
    }

    iziToast.show(settings);
}

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

Пользовательские анимации

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

iziToast.show({
    title: 'Анимация',
    message: 'Появление с эффектом масштабирования',
    class: 'my-animated-toast',
    animateInside: true,
    transitionIn: 'fadeInDown',
    transitionOut: 'fadeOutUp',
    position: 'topRight'
});

Основные параметры анимации:

  • transitionIn — анимация при появлении (fadeIn, fadeInDown, bounceIn и др.).
  • transitionOut — анимация при исчезновении (fadeOut, fadeOutUp, bounceOut и др.).
  • animateInside — применяет анимацию ко всем элементам уведомления.

Это позволяет создавать уникальные визуальные эффекты для каждого типа уведомлений.

Стилизация через CSS

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

.my-custom-toast {
    border-left: 5px solid #ff9800;
    background-color: #fff3e0;
    color: #bf360c;
    font-weight: bold;
}

.my-custom-toast .iziToast-title {
    font-size: 16px;
}

.my-custom-toast .iziToast-message {
    font-size: 14px;
}

С помощью CSS можно управлять:

  • Цветом фона и текста.
  • Отступами и шрифтами.
  • Положением иконки.
  • Адаптивностью уведомлений для мобильных устройств.

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

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

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

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

iziToast.show({
    title: 'Событие',
    message: 'Отслеживаем открытие уведомления',
    class: 'my-event-toast',
    onOpening: function(instance, toast){
        console.log('Уведомление открывается', toast);
    },
    onClosed: function(instance, toast, closedBy){
        console.log('Уведомление закрыто', closedBy);
    }
});

События позволяют расширять функциональность уведомлений, добавляя логирование, действия пользователя или автоматические сценарии закрытия.

Комбинирование собственных типов с функциями библиотеки

Созданные типы можно использовать вместе с остальными возможностями iziToast:

  • Автоматическое закрытие — параметр timeout для контроля времени видимости.
  • Закрытие по клику — параметр closeOnClick.
  • Позиционирование нескольких уведомлений — управление через position и zindex.

Пример комбинирования:

iziToast.show({
    title: 'Комбинированное уведомление',
    message: 'Мой собственный тип с автозакрытием и позиционированием',
    class: 'my-custom-toast',
    timeout: 5000,
    closeOnClick: true,
    position: 'bottomRight'
});

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

Собственные типы в iziToast дают полную свободу в дизайне и функциональности уведомлений, позволяя создавать визуально разнообразные и контекстно точные сообщения для пользователей.

Оглавление