Размеры уведомлений

Библиотека iziToast позволяет гибко управлять размерами уведомлений, что делает их адаптивными под различные интерфейсы и устройства. Основными параметрами для изменения размеров являются width, maxWidth и padding. Эти параметры можно задавать как числовыми значениями (в пикселях), так и строками с единицами измерения (em, %, rem).

iziToast.show({
    title: 'Сообщение',
    message: 'Пример уведомления с кастомной шириной',
    width: 400, // ширина в пикселях
    maxWidth: '80%', // максимальная ширина относительно экрана
    padding: 20 // внутренние отступы в пикселях
});
  • width – задаёт фиксированную ширину уведомления. Если значение не указано, применяется стандартная ширина по умолчанию (обычно около 320px).
  • maxWidth – ограничивает максимальную ширину уведомления, что полезно при отображении на больших экранах, предотвращая слишком растянутый вид.
  • padding – определяет внутренние отступы, влияя на расстояние текста от границ уведомления. Можно использовать разные значения для каждой стороны через объект:
padding: {
    top: 10,
    bottom: 10,
    left: 15,
    right: 15
}

Масштабирование текста и элементов внутри уведомлений

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

iziToast.show({
    title: 'Внимание',
    message: 'Текст уведомления увеличен для удобного чтения',
    width: 500,
    maxWidth: '90%',
    theme: 'dark',
    titleColor: '#ffffff',
    messageColor: '#cccccc',
    messageFontSize: '16px',
    titleFontSize: '18px'
});
  • titleFontSize и messageFontSize – позволяют настроить размер текста для заголовка и основного сообщения соответственно.
  • Использование относительных единиц (em, rem) обеспечивает адаптивность на разных устройствах.

Адаптивные уведомления

Для динамического интерфейса важно учитывать, что ширина уведомления может быть рассчитана автоматически в зависимости от ширины окна браузера. Параметр maxWidth особенно полезен при адаптивном дизайне:

iziToast.show({
    title: 'Адаптивное уведомление',
    message: 'Максимальная ширина 70% экрана',
    maxWidth: '70%',
    position: 'topRight'
});
  • На мобильных устройствах maxWidth в процентах позволяет уведомлению корректно подстраиваться под ширину экрана.
  • Установка фиксированной ширины на больших экранах может привести к визуальной дисгармонии, поэтому рекомендуется использовать сочетание width и maxWidth.

Изменение высоты и вертикальных отступов

Хотя iziToast не имеет прямого параметра для задания высоты уведомления, высота регулируется содержимым и внутренними отступами. Для управления вертикальной визуальной структурой используют:

  • padding – влияет на высоту за счёт внутренних отступов.
  • messageLineHeight – задаёт межстрочный интервал для текста, что также косвенно меняет высоту уведомления:
iziToast.show({
    title: 'Высота уведомления',
    message: 'Использование межстрочного интервала',
    padding: 20,
    messageLineHeight: 1.5
});

Кастомные размеры для конкретных типов уведомлений

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

iziToast.error({
    title: 'Ошибка',
    message: 'Произошла критическая ошибка',
    width: 500,
    maxWidth: '90%',
    padding: 25
});

iziToast.info({
    title: 'Информация',
    message: 'Короткое уведомление',
    width: 300,
    maxWidth: '60%',
    padding: 15
});

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

Вывод

Размеры уведомлений в iziToast настраиваются гибко через width, maxWidth, padding и параметры текста. Комбинирование этих свойств позволяет создавать адаптивные и визуально гармоничные уведомления для разных экранов и задач. Контроль над внутренними отступами и межстрочным интервалом обеспечивает корректное отображение содержимого и поддерживает читаемость.

Оглавление