Alert(
props):ReactNode
Alert component that uses a forward ref to expose an API.
This component utilizes the useWidgetWithConfig hook to create an alert widget context and the useImperativeHandle hook to expose the widget's API via the ref.
• props: Partial<AlertProps> & RefAttributes<AlertApi>
Partial properties of the AlertProps interface.
ReactNode
A JSX element that conditionally renders the AlertElement based on the widget's hidden state.
Represents the API for an alert component.
close():
void
Triggers alert closing programmatically (same as clicking on the close button (×)).
void
open():
void
Triggers the alert to be displayed for the user.
void
Represents the context for an Alert component.
api:
AlertApi
all the api functions to interact with the widget
directives:
AlertDirectives
directives to be used on html elements in the template of the widget or in the slots
state:
AlertState
the state of the widget
AlertDefaultSlotStructure(
slotContext):Element
Renders the default slot structure for an alert component.
• slotContext: AlertContext
The context object containing state and API for the alert.
Element
A JSX element representing the alert's body and an optional close button.
Represents the directives for an alert component.
transitionDirective:
Directive
the transition directive, piloting what is the visual effect of going from hidden to visible
Represents the properties for the Alert component.
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
true
animatedOnInit:
boolean
If true, alert opening will be animated.
Animation is triggered when the .open() function is called
or the visible prop is changed
false
ariaCloseButtonLabel:
string
Accessibility close button label
'Close'
children:
SlotContent<AlertContext>
Template for the alert content
className:
string
CSS classes to be applied on the widget main container
''
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.
true
onHidden: () =>
void
Callback called when the alert is hidden.
void
() => {}onShown: () =>
void
Callback called when the alert is shown.
void
() => {}onVisibleChange: (
visible) =>void
Callback called when the alert visibility changed.
• visible: boolean
void
() => {}structure:
SlotContent<AlertContext>
Global template for the alert component
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.
fadeTransition
type:
BSContextualClass
Type of the alert, following bootstrap types.
'primary'
visible:
boolean
If true the alert is visible to the user
true
Represents the state of an alert component.
ariaCloseButtonLabel:
string
Accessibility close button label
'Close'
children:
SlotContent<AlertContext>
Template for the alert content
className:
string
CSS classes to be applied on the widget main container
''
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.
true
hidden:
boolean
Is true when the alert is hidden. Compared to visible, this is updated after the transition is executed.
structure:
SlotContent<AlertContext>
Global template for the alert component
type:
BSContextualClass
Type of the alert, following bootstrap types.
'primary'
visible:
boolean
If true the alert is visible to the user
true
AlertWidget:
Widget<AlertProps,AlertState,AlertApi,AlertDirectives>
Represents an alert widget component.
createAlert(
props?):AlertWidget
Create an AlertWidget with given config props
• props?: PropsConfig<AlertProps>
an AlertWidget
getAlertDefaultConfig():
AlertProps
Retrieve a shallow copy of the default Alert config
the default Alert config