Скругление углов

В библиотеке iziToast оформление уведомлений можно гибко настраивать, включая скругление углов. Этот параметр управляется через опцию borderRadius. Она определяет радиус скругления углов в пикселях или в других CSS-единицах.

iziToast.show({
    title: 'Успешно!',
    message: 'Данные сохранены.',
    position: 'topRight',
    borderRadius: 10 // радиус скругления углов в пикселях
});

В данном примере все четыре угла уведомления будут скруглены на 10 пикселей.

Использование различных единиц измерения

Опция borderRadius поддерживает любые CSS-единицы, такие как px, em, %.

iziToast.show({
    title: 'Информация',
    message: 'Сообщение с процентным скруглением.',
    borderRadius: '50%' // делает уведомление круговым, если ширина и высота равны
});

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

Скругление отдельных углов

По умолчанию borderRadius применяет одинаковое значение ко всем углам. Для индивидуального скругления каждого угла требуется переопределение через CSS.

.custom-toast {
    border-top-left-radius: 20px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 0;
}
iziToast.show({
    title: 'Кастомизация',
    message: 'Разные углы у уведомления.',
    class: 'custom-toast'
});

Использование кастомного класса позволяет создавать уникальные формы уведомлений, подстраивая визуал под дизайн приложения.

Динамическое изменение скругления

Можно изменять borderRadius программно, в зависимости от условий или состояния приложения:

function showToast(isError) {
    iziToast.show({
        title: isError ? 'Ошибка' : 'Успех',
        message: 'Сообщение с динамическим скруглением.',
        borderRadius: isError ? 0 : 15
    });
}

В этом примере уведомление об ошибке имеет прямые углы, а успешное сообщение — скругленные.

Совместимость с другими стилями

Скругление углов работает вместе с остальными стилевыми опциями iziToast, такими как backgroundColor, titleColor, messageColor и padding. При комбинации этих параметров важно учитывать визуальную гармонию уведомления.

iziToast.show({
    title: 'Внимание',
    message: 'Уведомление с кастомным стилем.',
    backgroundColor: '#333',
    titleColor: '#fff',
    messageColor: '#ccc',
    padding: 15,
    borderRadius: 12
});

Итоговые рекомендации по скруглению углов

  • Значение borderRadius влияет на все углы одновременно, если не используется кастомный CSS.
  • Для нестандартных форм лучше применять отдельные CSS-свойства для каждого угла.
  • Использование процентов позволяет создавать круговые и эллиптические уведомления.
  • Скругление углов должно сочетаться с цветами, тенью и размером уведомления, чтобы сохранялась читаемость и эстетика.

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

Оглавление