Alert

Alert — это компонент для отображения сообщений пользователю с настраиваемыми стилями, анимациями и поведением.

Основное использование

Функция openAlert позволяет динамически отображать сообщения предупреждений с легкостью. Просто вызовите openAlert с желаемыми опциями, чтобы настроить тип, позицию, размер и другие свойства предупреждения.

import {openAlert} from "lib/alert/Alert"

openAlert({
    type: "success", // Тип предупреждения (например, success, error, info и т.д.)
    title: "Успех!", // Заголовок предупреждения
    subtitle: "Ваша операция прошла успешно.", // Подзаголовок для дополнительных деталей
    displayTime: 3000, // Длительность в миллисекундах
    position: "top-right", // Позиция на экране
})

Типы

Свойство type указывает тип предупреждения. Доступные варианты:

success (зеленый, для успешных операций)
warning (желтый, для предупреждений)
info (синий, для информационных сообщений)
error (красный, для ошибок)
neutral (по умолчанию, для общих уведомлений)

Позиционирование

Управляйте местом появления предупреждения на экране с помощью свойства position. Доступные позиции включают: top, bottom, left, right, center, top-right, top-left, bottom-right и bottom-left

Длительность

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

openAlert({
    displayTime: 5000,
    title: "Постоянное предупреждение",
    subtitle: "Это предупреждение останется на 5 секунд."
})

Если displayTime не указан, предупреждение останется видимым, пока не будет закрыто вручную.

Кнопка закрытия

Добавьте кнопку закрытия к предупреждению, установив свойство closeButton в значение true. Если displayTime установлен в 0, кнопка закрытия включена по умолчанию.

openAlert({
    type: 'error',
    closeButton: true,
    title: "Ошибка",
    subtitle: "Операция не удалась",
})

Добавление HTML контента

Вы можете включить HTML контент в свойство subtitle для более сложных макетов.

openAlert({
    type: "neutral",
    title: "Предупреждение с HTML",
    subtitle: `
    <div>
      <span style="color: blue;">Это пользовательский HTML контент.</span>
      <img src="https://via.placeholder.com/150" alt="Пример изображения" />
    </div>
  `,
})

Размер

Управляйте размером предупреждения с помощью свойства size. Доступные размеры включают: xs, sm, md, lg, xl, 2xl (по умолчанию), 3xl, 4xl, 5xl, 6xl, 7xl

openAlert({
    size: "lg",
    type: "error",
    title: "Большое предупреждение",
    subtitle: "Это предупреждение с большим размером.",
    displayTime: 3000,
})

Отключение анимаций

Отключите анимации, установив свойство notAnimate в значение true.

openAlert({
    notAnimate: true,
    type: 'warning',
    title: "Предупреждение",
    subtitle: "Обнаружены несохраненные изменения"
})

Пользовательские стили

Настройте внешний вид предупреждения, используя свойство class для применения пользовательских CSS классов.

openAlert({
    type: "success",
    title: "Пользовательское предупреждение",
    subtitle: "Это предупреждение имеет пользовательскую границу.",
    class: "custom-class",
})

Пример со всеми функциями

Вот пример, использующий несколько функций вместе:

openAlert({
    type: "info",
    position: "top-right",
    size: "md",
    displayTime: 5000,
    closeButton: true,
    notAnimate: true,
    title: "Комплексное предупреждение",
    subtitle: `
    <div>
      <strong>Пользовательский HTML контент:</strong>
      <p>Это предупреждение демонстрирует несколько функций.</p>
    </div>
  `,
    class: "border-2 border-blue-400 shadow-lg rounded-xl",
})