FlashMessage

FlashMessage is a UI component for displaying flash messages.

Learn more about the FlashMessage plugin.

constructor

constructor(options?: FlashMessage.Options)

The ui.FlashMessage constructor accepts several parameters:

title

[optional] The title of the flash message.

type

[optional] The type of flash message. One of 'alert' (default), 'warning', 'success', 'neutral'.

content

[optional] The content of the flash message. It can be either text or an arbitrary HTML.

modal

[optional] Set to true if you want your flash message to be a modal.

closeAnimation

[optional] Set to false if you don't want the flash message to be closed in an animated fashion. It can also be an object of the form { delay: Number, duration: Number } specifying properties of the close animation.

Methods

open()

flashMessage.open(): this;

Open the flash message.

on()

flashMessage.on(eventName: string, callback: EventHandler, context?: any): this;

Register a handler function that will be called whenever eventName is triggered. The optional context is an object that will be the context of the handler function (the this).

Static Methods

open()

ui.FlashMessage.open(content: any, title?: any, opt?: FlashMessage.Options): void;

Open a flash message (the shorter way). opt can contain any option that you can pass to the FlashMessage constructor function (see the constructor section for details).

Events

The FlashMessage object triggers events that you can react to. Events can be handled by using the on() method.

close:animation:complete

Triggered when the flash message is actually removed from the DOM, i.e. when the close animation finishes.

close

Triggered when the flash message gets closed.

Types

Options

FlashMessage.Options extends Dialog.Options.

interface Options extends Dialog.Options {
    cascade?: boolean,
    closeAnimation?: false | {
        delay?: number,
        duration?: number,
        easing?: string,
        properties?: {
            opacity?: number
        }
    },
    openAnimation?: {
        duration?: number,
        easing?: string,
        properties?: {
            opacity?: number
        }
    }
}