Toast

Viewport notifications for success, attention, errors, and information.

Quick start

Add Toast1 in the Designer. Use the example in a page method.

Toast1.Success('Saved successfully');

• Insert Toast from the nonvisual tray. Choose Duration, Position, state icons, and a Toast style in the Inspector.
• Success(message), Alert(message), Danger(message), and Notifier(message) display text notifications. Clear() dismisses this instance's notifications.
• Duration is in milliseconds; zero keeps notifications open. Notifications stack by position and are removed with their page or reusable placement.
• OnShow and OnClose provide message and state through CustomEvent<WebToastEventDetail>. The public Success method uses the existing Sucess state identifier.

Inspector properties

Component options and defaults. Fields without runtime access are configured in the Inspector.

API in code

Success(message: string): void;

Toast1.Success('Saved successfully');

Alert(message: string): void;

Toast1.Alert('Please check the form');

Danger(message: string): void;

Toast1.Danger('Unable to save');

Notifier(message: string): void;

Toast1.Notifier('A new message arrived');

Clear(): void;

Toast1.Clear();

focus(options?: FocusOptions): void;

show(): void;

hide(): void;

bindEvent(eventName: string, handler: WebComponentEventHandler<this> | null): () => void;

emit(eventName: string, detail?: unknown): boolean;

dispose(): void;

Events

Link methods in Interaction. How to use events.

import type { WebToast, WebToastEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Toast1Show(
    sender: WebToast,
    event: CustomEvent<WebToastEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { message, state } = event.detail;
    console.log(message, state);
  }
}

import type { WebToast, WebToastEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Toast1Close(
    sender: WebToast,
    event: CustomEvent<WebToastEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { message, state } = event.detail;
    console.log(message, state);
  }
}