Изменение размеров и отступов

В библиотеке Toastify управление визуальными параметрами уведомлений осуществляется через объект конфигурации, передаваемый при вызове функции Toastify(). Одними из ключевых аспектов оформления являются размеры тоста и отступы, которые позволяют гибко подстраивать уведомления под интерфейс приложения.

Настройка ширины и высоты

По умолчанию ширина тоста определяется библиотекой автоматически, но при необходимости её можно явно задать через параметр style:

Toastify({
  text: "Пример уведомления",
  duration: 3000,
  style: {
    width: "300px",
    height: "60px",
    background: "linear-gradient(to right, #00b09b, #96c93d)"
  }
}).showToast();
  • width — устанавливает ширину тоста. Можно использовать пиксели (px), проценты (%) или em.
  • height — задает высоту уведомления. Обычно оставляют автоматическую высоту, но при необходимости фиксируют её.

Управление внутренними отступами (padding)

Внутренние отступы определяют пространство между содержимым тоста и его границами. Изменяются через CSS-свойство padding в объекте style:

Toastify({
  text: "Уведомление с увеличенными отступами",
  duration: 4000,
  style: {
    padding: "20px 30px", // верх/низ и лев/прав
    background: "#ff6b6b"
  }
}).showToast();
  • padding: "top right bottom left" — полный формат, позволяющий задавать отступы индивидуально.
  • Использование сокращенной записи padding: "10px 20px" задает верх/низ и лев/прав одновременно.

Настройка внешних отступов (margin)

Для управления расстоянием между тостами и границами окна или между несколькими тостами используется margin:

Toastify({
  text: "Тост с внешними отступами",
  duration: 3000,
  style: {
    margin: "15px",
    background: "#1e90ff"
  }
}).showToast();
  • Можно задавать все стороны одновременно (margin: "15px") или раздельно (margin: "10px 5px 20px 5px").
  • Отдельные тосты можно позиционировать с уникальными внешними отступами для создания визуальной иерархии уведомлений.

Масштабирование шрифта

Размер уведомления напрямую зависит от текста, поэтому корректировка шрифта влияет на восприятие тоста. Управляется через fontSize и lineHeight:

Toastify({
  text: "Большой текст уведомления",
  duration: 3500,
  style: {
    fontSize: "18px",
    lineHeight: "1.5",
    padding: "15px 25px",
    background: "#ffa500"
  }
}).showToast();
  • fontSize — увеличивает или уменьшает размер текста.
  • lineHeight — регулирует высоту строки, что особенно важно для многострочных уведомлений.

Примеры комплексного оформления размеров и отступов

Toastify({
  text: "Комплексный тост",
  duration: 5000,
  style: {
    width: "400px",
    height: "80px",
    padding: "20px",
    margin: "10px auto",
    fontSize: "16px",
    lineHeight: "1.4",
    background: "#4caf50",
    borderRadius: "8px"
  }
}).showToast();
  • borderRadius добавляет скругление углов, что улучшает визуальную читаемость.
  • margin: “10px auto” центрирует тост горизонтально с внешними отступами сверху и снизу.

Динамическое изменение размеров через JavaScript

Размеры и отступы можно менять динамически, модифицируя элемент DOM после создания тоста:

let toast = Toastify({
  text: "Динамическое изменение",
  duration: 4000
}).showToast();

toast.toastElement.style.width = "500px";
toast.toastElement.style.padding = "25px";
  • toast.toastElement возвращает DOM-элемент тоста.
  • Позволяет изменять CSS-свойства после отображения уведомления для анимаций или адаптации под контент.

Советы по оптимальному использованию

  1. Фиксированные размеры лучше применять только для специфических интерфейсов; автоматическая ширина подходит для большинства случаев.
  2. Внутренние отступы должны обеспечивать читаемость текста, особенно при использовании многострочных уведомлений.
  3. Внешние отступы помогают контролировать дистанцию между тостами при последовательном вызове нескольких уведомлений.
  4. Совместное использование width, padding и fontSize позволяет создавать визуально сбалансированные уведомления, адаптированные под разные разрешения экрана.

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

Оглавление