notification-view
" custom element:This web component is meant to display desktop-liked notifications for a custom period. Add a "
e.notify('This is a test message', 'info', 3000);
This component supports for types of notifications: "success", "error", "warning", and "info". The last argument is the timeout to auto-hide the notification.
<notification-view></notification-view>
The default timeout is 10 seconds. The user also can manually close the notification by pressing the "close" button.
You can configure the color and background color of the notifications using the following CSS variables:
notification-view {
--success-fg: #fff;
--success-bg: #27a043;
--info-fg: #fff;
--info-bg: #1b99af;
--warning-fg: #fff;
--warning-bg: #e18a12;
--error-fg: #fff;
--error-bg: #d13342;
}
Also, you can change the gap between the elements of the notification using the following CSS variable:
notification-view {
--gap: 10px;
}