headless

API alert

AlertApi

interface

Represents the API for an alert component.

Methods
close

close(): void

Triggers alert closing programmatically (same as clicking on the close button (×)).

Returns

void


open

open(): void

Triggers the alert to be displayed for the user.

Returns

void


AlertDirectives

interface

Represents the directives for an alert component.

Properties
transitionDirective

transitionDirective: Directive

the transition directive, piloting what is the visual effect of going from hidden to visible


AlertProps

interface

Represents the properties for the alert component.

Properties
animated

animated: boolean

If true, alert closing will be animated.

Animation is triggered when clicked on the close button (×), via the .close() function or the visible prop is changed

Default Value

true


animatedOnInit

animatedOnInit: boolean

If true, alert opening will be animated.

Animation is triggered when the .open() function is called or the visible prop is changed

Default Value

false


ariaCloseButtonLabel

ariaCloseButtonLabel: string

Accessibility close button label

Default Value

'Close'


className

className: string

CSS classes to be applied on the widget main container

Default Value

''


dismissible

dismissible: boolean

If true, alert can be dismissed by the user. The close button (×) will be displayed and you can be notified of the event with the (close) output.

Default Value

true


onHidden

onHidden: () => void

Callback called when the alert is hidden.

Returns

void

Default Value
() => {}

onShown

onShown: () => void

Callback called when the alert is shown.

Returns

void

Default Value
() => {}

onVisibleChange

onVisibleChange: (visible) => void

Callback called when the alert visibility changed.

Parameters

visible: boolean

Returns

void

Default Value
() => {}

transition

transition: TransitionFn

The transition function will be executed when the alert is displayed or hidden.

Depending on the value of animatedOnInit, the animation can be optionally skipped during the showing process.

Default Value
async () => {}

visible

visible: boolean

If true the alert is visible to the user

Default Value

true


AlertState

interface

Represents the state of an alert component.

Properties
ariaCloseButtonLabel

ariaCloseButtonLabel: string

Accessibility close button label

Default Value

'Close'


className

className: string

CSS classes to be applied on the widget main container

Default Value

''


dismissible

dismissible: boolean

If true, alert can be dismissed by the user. The close button (×) will be displayed and you can be notified of the event with the (close) output.

Default Value

true


hidden

hidden: boolean

Is true when the alert is hidden. Compared to visible, this is updated after the transition is executed.


visible

visible: boolean

If true the alert is visible to the user

Default Value

true


AlertWidget

type alias

AlertWidget: Widget<AlertProps, AlertState, AlertApi, AlertDirectives>

Represents an alert widget with specific properties, state, API, and directives.


createAlert

function

createAlert(props?): AlertWidget

Create an AlertWidget with given config props

Parameters

props?: PropsConfig<AlertProps>

Returns

AlertWidget

an AlertWidget


getAlertDefaultConfig

function

getAlertDefaultConfig(): AlertProps

Retrieve a shallow copy of the default alert config

Returns

AlertProps

the default alert config