Тост нотификации

Компонент Тост — универсальный инструмент для отображения кратких уведомлений («Тостов») в приложении. Он поддерживает различные конфигурации для настройки внешнего вида, поведения и размещения тостов. Ниже приведена документация по компоненту «Тост» и его методам. Сообщения / Тост

Синтаксис

toast.open(title, options);
// toast.open( title: string, options?: { message?: string, duration?: number = 3, id?: string, placement?: "top" | "topLeft" | "topRight" | "bottom" | "bottomRight", "bottomRight" = "bottomRight", dismissible?: boolean = true } )

Параметры

  • title (строка): заголовок всплывающего уведомления. Это обязательный параметр, который будет отображаться на видном месте всплывающего уведомления.

  • options (объект): Необязательный объект конфигурации, который позволяет настраивать всплывающее уведомление. Свойства, доступные в этом объекте, включают:

    • message (строка): Необязательно. Сообщение, которое будет отображаться в всплывающем окне. Содержит дополнительную информацию о всплывающем уведомлении.

    • duration (число): Необязательно. Время, в течение которого всплывающее окно должно оставаться на экране, указывается в секундах. Значение по умолчанию — 3 секунды.

    • id (строка): Необязательно. Уникальный идентификатор всплывающего сообщения. При необходимости его можно использовать для таргетинга на конкретные всплывающие уведомления.

    • placement (строка): Необязательно. Определяет, в каком месте экрана будет отображаться всплывающее окно. Возможны следующие значения "top", "topLeft", "topRight", "bottom", "bottomRight". По умолчанию используется следующее размещение "bottomRight".

    • dismissible (логическое значение): Необязательно. Определяет, может ли пользователь отменить всплывающее окно до истечения срока действия. Значение по умолчанию — true, что делает тост неприемлемым.

Возвращаемое значение

Метод toast.open не возвращает значение.

Примеры

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

Чтобы отобразить простой тост с одним только заголовком:

toast.open('Hello World!');

С сообщением и продолжительностью

Чтобы отобразить всплывающее окно с заголовком, сообщением и настраиваемой продолжительностью:

toast.success("Query runs successfully", {duration: 10});

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

Для отображения всплывающего сообщения в верхней части экрана, которое невозможно отключить:

toast.warn('Alert!', { message: 'System will undergo maintenance tonight.', placement: 'top', dismissible: false });

Кастомизация

Компонент Тост также предоставляет дополнительные методы отображения тостов с предопределенными стилями и значками, соответствующими различным типам уведомлений: info, success, warn и error. Эти методы имеют ту же сигнатуру и параметры, что иtoast.open, но они отображают тосты с цветами и значками, которые соответствуют их соответствующим типам уведомлений.

  • По истечении этого времени тост автоматически исчезнет, если только dismissible установлен на false. В этом случае пользователь должен вручную закрыть всплывающее окно.

  • Если несколько тостов произносятся с одним и тем же id, они будут рассматриваться как отдельные экземпляры, если только для обработки таких случаев не будет реализована пользовательская логика.

  • Возможно, потребуется скорректировать расположение всплывающих окон в зависимости от общей компоновки и быстродействия приложения, чтобы обеспечить оптимальную видимость на различных устройствах.

Каждый из этих методов принимает те же параметры, что и toast.open, позволяет настраивать сообщение, продолжительность, идентификатор, место размещения и возможность отклонения.

  • toast.info(title, options?): Отображает информационное сообщение с синим значком.

  • toast.success(title, options?): Отображает информационное сообщение с зеленым значком.

  • toast.warn(title, options?): Отображает всплывающее предупреждение с желтым значком.

  • toast.error(title, options?): Отображает всплывающее сообщение об ошибке с красным значком.

Дополнительные методы

toast.destroy(id?)

Уничтожает открытый тост. Если идентификатор не указан, все тосты будут закрыты.

  • Параметры:

    • id (строка, необязательно): уникальный идентификатор тоста, который нужно уничтожить. Если он не указан, все тосты будут уничтожены.

Last updated