Адаптация под дизайн-систему

Для интеграции iziToast в проект необходимо подключить CSS и JS файлы библиотеки. Обычно это делается через CDN или локальные файлы:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/izitoast/dist/css/iziToast.min.css">
<script src="https://cdn.jsdelivr.net/npm/izitoast/dist/js/iziToast.min.js"></script>

После подключения можно создавать уведомления с помощью метода iziToast.show(). Базовый пример:

iziToast.show({
    title: 'Успешно',
    message: 'Данные сохранены',
    position: 'topRight'
});

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

  • title — заголовок уведомления
  • message — основной текст
  • position — положение на экране (topRight, topLeft, bottomRight, bottomLeft, center)

Настройка внешнего вида под дизайн-систему

Для адаптации iziToast под собственную дизайн-систему важно использовать следующие возможности:

Цветовая палитра

Стили iziToast легко переопределяются через объект theme и кастомные CSS классы:

iziToast.settings({
    theme: 'light', // 'light', 'dark', или кастомный
    backgroundColor: '#f5f5f5',
    titleColor: '#333333',
    messageColor: '#555555',
    progressBarColor: '#007bff'
});
  • backgroundColor задает фон уведомления
  • titleColor и messageColor — цвета текста
  • progressBarColor — цвет индикатора прогресса

Можно создать собственный CSS класс для полного контроля внешнего вида:

.custom-toast {
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

И применить его:

iziToast.show({
    title: 'Информация',
    message: 'Сообщение в стиле дизайн-системы',
    class: 'custom-toast'
});

Анимации и переходы

Для соответствия общему UX дизайн-системы используются анимации:

iziToast.show({
    title: 'Пример',
    message: 'Появление уведомления с анимацией',
    animateInside: true,
    transitionIn: 'fadeInDown',
    transitionOut: 'fadeOutUp'
});
  • transitionIn и transitionOut контролируют вход и выход уведомления
  • animateInside активирует анимацию элементов внутри блока

Доступные типы анимаций включают fadeIn, fadeOut, bounceIn, bounceOut, slideInRight и др. Их можно расширять кастомными классами CSS.

Управление размерами и позиционированием

Размер уведомления под дизайн-систему регулируется через maxWidth и padding:

iziToast.show({
    title: 'Широкое уведомление',
    message: 'Сообщение с фиксированной шириной',
    maxWidth: 400,
    padding: 20
});
  • maxWidth ограничивает ширину уведомления
  • padding позволяет согласовать внутренние отступы с другими элементами интерфейса

Позиционирование можно комбинировать с отступами:

iziToast.show({
    title: 'В правом верхнем углу',
    message: 'С кастомными отступами',
    position: 'topRight',
    timeout: 5000,
    balloon: true
});

Кастомные иконки и кнопки

Дизайн-система часто подразумевает уникальные иконки для уведомлений. В iziToast это реализуется через icon и buttons:

iziToast.show({
    title: 'Ошибка',
    message: 'Что-то пошло не так',
    icon: 'icon-error', // кастомный CSS класс или URL
    buttons: [
        ['<button>Закрыть</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast);
        }]
    ]
});
  • icon можно задавать как класс из библиотеки иконок или путь к SVG/PNG
  • buttons позволяют создавать интерактивные элементы с обратным вызовом

Глобальные настройки

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

iziToast.settings({
    timeout: 4000,
    close: true,
    layout: 2,
    zindex: 9999
});
  • timeout — время показа уведомления
  • close — наличие кнопки закрытия
  • layout — структура уведомления (1 или 2 блока)
  • zindex — уровень наложения на странице

Интеграция с компонентной системой

При использовании фреймворков, таких как Vue или React, iziToast можно обернуть в сервис или компонент:

// toastService.js
export default {
    success(message) {
        iziToast.show({
            title: 'Успех',
            message: message,
            color: 'green',
            position: 'topRight'
        });
    },
    error(message) {
        iziToast.show({
            title: 'Ошибка',
            message: message,
            color: 'red',
            position: 'topRight'
        });
    }
};

Такой подход позволяет централизованно управлять стилями и поведением уведомлений, полностью интегрируя их в дизайн-систему проекта.

Доступность и адаптивность

Для соответствия стандартам UX и accessibility:

  • Использовать ariaLive для озвучивания уведомлений скринридерами
  • Проверять контраст текста и фона на соответствие WCAG
  • Настраивать адаптивные размеры для мобильных устройств через CSS или maxWidth
iziToast.show({
    title: 'Адаптивное уведомление',
    message: 'Подстраивается под экран',
    position: 'bottomRight',
    maxWidth: window.innerWidth < 480 ? window.innerWidth - 20 : 400
});

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

Оглавление