ApeekFlow
  • Платформа Apeekflow
  • С чего начать
    • Начало работы
    • Создаем первое приложение
    • Шаблоны проектов
  • Настройки платформы
    • Профиль
    • Библиотека запросов
    • Источники данных
      • Базы данных
        • PostgreSQL
        • MongoDB
        • MySQL
        • Redis
        • Microsoft SQL Server
        • MariaDB
      • AI сервисы
      • App Development
        • REST API
        • ApeekFlow REST API
      • Messaging
      • Assets
        • Хранилище файлов S3
      • Websocket
      • Сервисы
        • Google Sheets
    • Настройки
      • Рабочие пространства
      • Пользователи и группы
      • Расширенные настройки
        • Сторонние библиотеки
        • Импорт UMD библиотек
    • Корзина
  • Конструктор приложений
    • Обзор
      • Приложения
      • Модули
      • Приложение или модуль
      • Навигационная панель
      • Массовое редактирование
      • Управление слоями
      • Использвание Markdown
      • Горячие клавиши
    • Каталог компонентов
      • Общие настройки компонентов
      • Тост нотификации
      • Components
        • Table
        • Cascader
        • Link
        • Float Button
        • Form
        • JSON Schema Form
        • JSON Editor
        • JSON Explorer
        • Rich Text Editor
        • Input
        • Password
        • Number Input
        • Text Area
        • Auto Complete
        • Switch
        • Checkbox
        • Radio
        • Slider
        • Range Slider
        • Form Button
        • Icon Button
        • Dropdown
        • Toggle Button
        • Rating
        • Select
        • Multiselect
        • Tree
        • Tree Select
        • Text Display
      • Calendar
        • Calendar
        • Timer
        • Date
        • Date Range
        • Time
        • Time Range
      • Layout
        • Responsive Layout
        • Page Layout
        • Column Layout
        • Float Text Container
        • Content Card
        • Tabbed Container
        • Collapsible Container
        • Container
        • List View
        • Grid
        • Modal
        • Drawer
        • Divider
        • Navigation
        • Segmented Control
        • Tour
      • Multimedia
        • File Upload
        • File Viewer
        • Image
        • Image Carousel
        • Audio
        • Video
        • Shapes
        • Lottie Animation
        • Icons
        • Image Editor
        • Color Picker
        • QR Code
        • Scanner
      • Graphs
        • Basic Chart
        • Candlestick Chart
        • Funnel Chart
        • Gauge Chart
        • Graph Chart
        • Heatmap Chart
        • Radar Chart
        • Sankey Chart
        • Sunburst Chart
        • Theme River Chart
        • Tree Chart
        • Treemap Chart
        • Geo Map Charts
        • Mermaid Chart
        • Timeline
        • Progress
        • Progress Circle
      • Collaboration
        • Avatar
        • Avatar Group
        • Comment
      • Integration
        • Page
    • Кастомизация и код
      • Настройка стилей компонентов
      • Temporary State
      • Transformers
      • Data responder
      • Event handlers
      • Выполнение запросов
        • Привязка данных запроса к компонентам
      • Использование Javascript
        • JavaScript запросы
        • Встроенные функции JS
        • Работа с датой и временем в Day.js
    • Антипатерны
  • Релиз менеджмент
    • Версионирование запросов
    • Версионирование приложений
    • Доступ до приложений
    • Публикация приложений
  • Безопасность
    • Основная информация
    • IP адреса облака
    • Права доступа до объектов
Powered by GitBook
On this page
  1. Конструктор приложений
  2. Каталог компонентов

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

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

Синтаксис

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 (строка, необязательно): уникальный идентификатор тоста, который нужно уничтожить. Если он не указан, все тосты будут уничтожены.

PreviousОбщие настройки компонентовNextComponents

Last updated 4 months ago