Изображения в уведомлениях

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

Подключение изображений через опцию icon

Параметр icon позволяет указать стандартную иконку или путь к пользовательскому изображению. Значение может быть:

  • Класс иконки (например, из Font Awesome или Material Icons)
  • URL изображения (локальный или удаленный)
  • Base64-код изображения

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

iziToast.show({
    title: 'Успешно',
    message: 'Файл загружен',
    icon: 'ico-check', // класс иконки
    color: 'green'
});

Для изображения через URL:

iziToast.show({
    title: 'Информация',
    message: 'Новая версия доступна',
    icon: 'https://example.com/images/info.png'
});

При использовании иконок через классы важно подключить соответствующую библиотеку шрифтов, иначе иконка не будет отображаться.

Кастомные изображения с помощью опции image

Опция image позволяет добавить полноценное изображение вместо иконки. Это особенно полезно для аватаров пользователей или мини-графики в уведомлениях.

iziToast.show({
    title: 'Новое сообщение',
    message: 'Вы получили сообщение от Марии',
    image: 'https://example.com/avatar/maria.png',
    theme: 'light'
});
  • Изображение будет отображено слева от текста уведомления.
  • Размер изображения можно контролировать через CSS, применяя стили к классу .iziToast-image.

Пример кастомного размера:

.iziToast-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

Совмещение иконок и изображений

В iziToast можно одновременно использовать иконку и изображение, если требуется создать комбинированный визуальный эффект. По умолчанию image имеет приоритет перед icon. Если оба параметра указаны, будет показано изображение.

iziToast.show({
    title: 'Профиль обновлён',
    message: 'Фото успешно загружено',
    icon: 'ico-user',
    image: 'https://example.com/avatar/user.png'
});

Динамическая подгрузка изображений

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

fetch('/api/getLatestAvatar')
    .then(res => res.json())
    .then(data => {
        iziToast.show({
            title: 'Новый пользователь',
            message: data.username,
            image: data.avatarUrl
        });
    });

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

Настройка положения и размера изображения

  • Положение — изображения всегда располагаются слева от текста. Для изменения позиционирования можно использовать CSS-класс .iziToast-image.
  • Размер — задаётся через свойства width и height в CSS.
  • Форма — можно использовать border-radius для круглых аватаров или скругленных прямоугольников.

Пример круглого изображения с тенью:

.iziToast-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

Поддержка анимаций для изображений

iziToast наследует анимацию уведомления для изображения. Дополнительно можно применить CSS-анимации к .iziToast-image:

.iziToast-image {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

Это позволяет выделять важные уведомления и привлекать внимание пользователя.

Ограничения и рекомендации

  • Рекомендуется использовать оптимизированные изображения, чтобы не замедлять отображение уведомлений.
  • Избегать слишком больших изображений, так как они могут нарушать макет уведомления.
  • Для иконок лучше использовать векторные форматы (SVG или шрифтовые библиотеки), так как они масштабируются без потери качества.

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

Оглавление