Полный список параметров

Библиотека iziToast предоставляет гибкий механизм для отображения уведомлений в веб-приложениях. Каждый уведомительный элемент настраивается через объект с множеством параметров. Рассмотрим их детально.

Параметры контента

  • title Заголовок уведомления. Поддерживает HTML-теги. Тип: string. Пример: 'Успех!'.

  • titleColor Цвет текста заголовка. Тип: string (CSS-значение). Пример: '#FFFFFF'.

  • titleSize Размер шрифта заголовка. Тип: string (например, '16px'). По умолчанию равен 16px.

  • message Основной текст уведомления. Тип: string. Может содержать HTML.

  • messageColor Цвет текста сообщения. Тип: string. По умолчанию '#FFFFFF'.

  • messageSize Размер шрифта сообщения. Тип: string. По умолчанию 14px.

Параметры внешнего вида

  • theme Тема уведомления: 'light' или 'dark'. Тип: string. Влияет на фон и стиль текста.

  • color Основной цвет уведомления. Тип: string. Применяется к фону при использовании стандартной темы.

  • icon Иконка уведомления. Тип: string (класс иконки, например 'fa fa-check'). Можно использовать кастомные иконки.

  • iconColor Цвет иконки. Тип: string. По умолчанию совпадает с цветом текста заголовка.

  • iconUrl URL кастомной иконки вместо стандартной. Тип: string.

  • image Картинка уведомления. Тип: string. Применяется для визуального дополнения сообщения.

  • imageWidth Ширина изображения. Тип: number. По умолчанию 50 пикселей.

  • layout Схема размещения элементов: 1 (иконка + заголовок + сообщение в строку) или 2 (иконка слева, заголовок и сообщение справа). Тип: number.

  • maxWidth Максимальная ширина уведомления. Тип: number или string. По умолчанию 600px.

Параметры поведения

  • timeout Время отображения уведомления в миллисекундах. Тип: number. Значение 0 делает уведомление постоянным.

  • resetOnHover Сбрасывать таймер при наведении мыши. Тип: boolean. По умолчанию false.

  • progressBar Показывать индикатор прогресса таймера. Тип: boolean. По умолчанию true.

  • progressBarColor Цвет индикатора прогресса. Тип: string. По умолчанию белый.

  • animateInside Анимировать содержимое уведомления. Тип: boolean. По умолчанию true.

  • drag Разрешить перемещение уведомления мышью. Тип: boolean. По умолчанию true.

  • closeOnClick Закрывать уведомление при клике. Тип: boolean. По умолчанию true.

  • closeOnEscape Закрывать уведомление при нажатии клавиши Escape. Тип: boolean. По умолчанию true.

  • displayMode Режим отображения: 0 — несколько уведомлений одновременно, 1 — по одному. Тип: number. По умолчанию 0.

  • position Расположение уведомления: 'topRight', 'topLeft', 'bottomRight', 'bottomLeft', 'topCenter', 'bottomCenter', 'center'. Тип: string.

Параметры анимации

  • transitionIn Эффект появления уведомления. Тип: string. Доступны стандартные значения: 'fadeIn', 'bounceInLeft', 'bounceInRight'.

  • transitionOut Эффект скрытия уведомления. Тип: string. Примеры: 'fadeOut', 'bounceOutLeft'.

  • transitionInMobile Анимация для мобильных устройств. Тип: string. Позволяет задать отдельную анимацию для маленьких экранов.

  • transitionOutMobile Анимация скрытия на мобильных устройствах. Тип: string.

Коллбэки

  • onOpening Функция, вызываемая перед появлением уведомления. Тип: function(instance, toast).

  • onOpened Функция, вызываемая после появления уведомления. Тип: function(instance, toast).

  • onClosing Функция перед закрытием уведомления. Тип: function(instance, toast, closedBy).

  • onClosed Функция после закрытия уведомления. Тип: function(instance, toast, closedBy).

Параметр closedBy может принимать значения: 'timeout', 'button', 'icon', 'overlay', 'drag'.

Продвинутые настройки

  • overlay Включает затемнение фона. Тип: boolean. По умолчанию false.

  • overlayClose Закрытие уведомления при клике по затемнённому фону. Тип: boolean. По умолчанию true.

  • zindex Индекс слоя уведомления. Тип: number. По умолчанию 9999.

  • target CSS-селектор, куда вставлять уведомление. Тип: string. По умолчанию 'body'.

  • position Позволяет разместить уведомление относительно конкретного элемента. Тип: string.

  • theme Можно задать пользовательскую тему через объект с ключами color, background, icon.

  • buttons Массив объектов с кнопками уведомления. Каждый объект имеет поля text, onclick, class, id.

  • inputs Массив объектов с полями ввода. Поля: placeholder, value, id, class, onchange.

  • layout Позволяет задавать кастомные схемы расположения через CSS-классы.

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

Оглавление