Встроенные иконки

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

Поддерживаемые типы встроенных иконок

iziToast имеет предопределённые иконки, которые соответствуют типам уведомлений:

  • success – используется для положительных уведомлений. Иконка по умолчанию: галочка.
  • error – уведомление об ошибке, отображается с крестиком.
  • info – информационное уведомление, отображается с буквой «i» или символом информации.
  • warning – предупреждение, отображается с восклицательным знаком.

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

Настройка встроенной иконки

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

iziToast.show({
    title: 'Успешно',
    message: 'Данные сохранены',
    color: 'green',
    icon: 'icon-check', // встроенная иконка
    position: 'topRight'
});
  • icon – ключ встроенной иконки.
  • color – цвет уведомления, который влияет и на цвет иконки по умолчанию.
  • position – расположение уведомления на экране.

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

Использование типа уведомления для автоматической иконки

Библиотека поддерживает параметр type, который автоматически выбирает соответствующую иконку:

iziToast.success({
    title: 'Успешно',
    message: 'Операция выполнена',
    position: 'topRight'
});

iziToast.error({
    title: 'Ошибка',
    message: 'Что-то пошло не так',
    position: 'topRight'
});

iziToast.info({
    title: 'Информация',
    message: 'Новое сообщение',
    position: 'topRight'
});

iziToast.warning({
    title: 'Предупреждение',
    message: 'Обратите внимание',
    position: 'topRight'
});
  • Использование iziToast.success, iziToast.error, iziToast.info и iziToast.warning автоматически подставляет соответствующую встроенную иконку.
  • Параметр color можно задавать отдельно для усиления визуального акцента.

Замена встроенной иконки на кастомную

Даже при использовании встроенных иконок есть возможность заменить их на кастомные изображения или HTML-элементы:

iziToast.show({
    title: 'Кастомная иконка',
    message: 'Используется своя иконка',
    icon: '<i class="fas fa-star"></i>', // кастомная иконка через HTML
    color: 'purple',
    position: 'topRight'
});
  • Встроенные иконки заменяются любым HTML или SVG, что позволяет интегрировать библиотеку с иконками из Font Awesome, Material Icons и других библиотек.
  • В этом случае параметр color влияет только на фон уведомления, а иконка остаётся независимой.

Управление размером и расположением иконки

По умолчанию иконка располагается слева от текста уведомления и имеет стандартный размер. Настройки через CSS позволяют изменять её размеры и позицию:

.iziToast-icon {
    font-size: 24px; /* изменение размера иконки */
    margin-right: 15px; /* отступ от текста */
}
  • Класс .iziToast-icon применим ко всем встроенным и кастомным иконкам.
  • Можно задавать индивидуальные стили для каждого типа уведомления через дополнительное указание класса, например .iziToast-success .iziToast-icon.

Особенности встроенных иконок

  • Иконки автоматически меняют цвет в зависимости от заданного параметра color уведомления.
  • При использовании методов success, error, info, warning иконка подбирается автоматически, что ускоряет разработку.
  • Встроенные иконки совместимы с анимацией появления и исчезновения уведомления.
  • Для полных кастомизаций можно комбинировать встроенные иконки с дополнительными CSS-анимациями.

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

Оглавление