Alert Showcase
Component Documentation
Component Name
Alert
Builder Function Name
create_alert_manager
Description
Manages display of alerts, including auto-delete and optional callbacks
Use like example
Config
| Property | Type | Default | Description |
|---|---|---|---|
| alerts | array | initial list of alerts | |
| is_small_screen | boolean | false | whether the layout adjusts for smaller screens |
| x_color | string | var(--g7-t) | color for the x dismiss icon |
| border_radius | number | 1 | rem-based border radius for the alert |
| success_icon_color | string | var(--success-t) | color for the success check icon |
| error_icon_color | string | var(--error-t) | color for the error x icon |
| on_alert_added | function | callback triggered each time a new alert is created |
Methods
| Method | Description | Parameters | Returns |
|---|---|---|---|
| add_alert | adds a new alert, auto-assigns an id, and starts or restarts the auto-delete timer | header: string message: string icon: string | void |
| delete_alert | removes a specific alert by id; also clears the auto-delete interval if no alerts remain | id: string | void |
Returned Properties
| Property | Type | Description |
|---|---|---|
| interval | any | reference to the auto-delete setinterval, or null if inactive |
| alerts | array | current array of alerts being tracked |
| is_small_screen | boolean | reflects if the layout is set to small screen mode |
| x_color | string | color for the x dismiss icon |
| border_radius | number | rem-based border radius for the alert |
| success_icon_color | string | color for the success check icon |
| error_icon_color | string | color for the error x icon |
