Breakpoints

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

Настройка breakpoints

iziToast поддерживает несколько предопределённых точек остановки (breakpoints) с соответствующими настройками, которые позволяют изменять поведение уведомлений в зависимости от ширины окна браузера.

Пример конфигурации:

iziToast.settings({
    breakpoints: {
        320: {
            timeout: 5000,
            layout: 2,
            position: 'topRight',
            transitionIn: 'fadeInDown',
            transitionOut: 'fadeOutUp'
        },
        768: {
            timeout: 4000,
            layout: 1,
            position: 'topRight',
            transitionIn: 'bounceInRight',
            transitionOut: 'fadeOutRight'
        },
        1024: {
            timeout: 3000,
            layout: 1,
            position: 'topRight',
            transitionIn: 'flipInX',
            transitionOut: 'flipOutX'
        }
    }
});
  • 320, 768, 1024 – ширина экрана в пикселях, при которой применяются настройки.
  • timeout – длительность отображения уведомления.
  • layout – вид компоновки (например, одинарное или двойное уведомление).
  • position – позиция на экране.
  • transitionIn / transitionOut – анимации появления и исчезновения.

В этом примере при ширине экрана до 320px уведомления будут появляться сверху справа, с двумя элементами в блоке, и исчезать с анимацией fadeOutUp. При увеличении ширины до 768px и 1024px настройки автоматически изменяются, обеспечивая оптимальный вид уведомления.

Динамическое использование breakpoints

iziToast позволяет динамически определять настройки уведомлений на основе текущей ширины окна через JavaScript. Например:

function showNotification(message) {
    let width = window.innerWidth;
    let options = {};

    if(width <= 320) {
        options = { timeout: 5000, position: 'topRight', layout: 2 };
    } else if(width <= 768) {
        options = { timeout: 4000, position: 'topRight', layout: 1 };
    } else {
        options = { timeout: 3000, position: 'topRight', layout: 1 };
    }

    iziToast.show({
        message: message,
        ...options
    });
}
  • Использование window.innerWidth позволяет учитывать реальные размеры экрана пользователя.
  • Можно динамически менять layout, timeout, position и анимации.
  • Подходит для реактивного дизайна интерфейсов.

Совместимость с адаптивными интерфейсами

Breakpoints интегрируются с адаптивной версткой. Например, уведомления можно привязать к определённым блокам интерфейса, которые изменяют размеры в зависимости от ширины экрана:

iziToast.show({
    message: 'Форма успешно отправлена',
    position: window.innerWidth < 768 ? 'topRight' : 'bottomRight',
    timeout: window.innerWidth < 768 ? 5000 : 3000
});

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

Анимации и их адаптация под breakpoints

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

iziToast.show({
    message: 'Данные сохранены',
    transitionIn: window.innerWidth < 768 ? 'fadeInDown' : 'flipInX',
    transitionOut: window.innerWidth < 768 ? 'fadeOutUp' : 'flipOutX',
});
  • Для мобильных устройств лучше использовать плавные fade анимации.
  • На десктопах можно применять более яркие и крупные эффекты, которые привлекают внимание.

Практические рекомендации

  1. Минимальный размер уведомления: на мобильных экранах рекомендуется использовать компактные layout с минимальной шириной.
  2. Длительность показа: маленькие устройства требуют большего времени показа (timeout), чтобы пользователь успел прочитать сообщение.
  3. Позиционирование: избегать перекрытия элементов управления, использовать верхние углы (topRight или topLeft) для уведомлений.
  4. Адаптивные анимации: использовать плавные анимации на мобильных и более выразительные на десктопах.

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

Оглавление