Notification toasts component
<wy-notification-toasts> | WyNotificationToasts
Notification toasts can be displayed when notifications are received. To enable them, just add the <wy-notification-toasts> element anywhere on your page. You can also handle navigation when a notification is clicked.
Importing
If you installed the UIKit with npm you can use the following snippet to import the component into your project.
Otherwise, if you installed the UIKit as a <script> you can ignore this section.
import { WyNotificationToasts } from "@weavy/uikit-web";
Examples
Example: Display rich notification toasts on your page.
<wy-notification-toasts></wy-notification-toasts>
Example: Display native browser notification toasts.
<wy-notification-toasts appearance="native"></wy-notification-toasts>
Properties
| Property | Type/Value | Description |
|---|---|---|
appearance |
"internal", "native", "none" |
The kind of toasts to use. Defaults to "internal". |
duration |
number |
Duration of the HTML toasts in milliseconds. Defaults to 5000. |
requestUserPermission |
boolean |
Whether to use the Notifications API to request user permission to display "internal"" toasts. Defaults to false. This property has no effect on "native" browser notifications, which always require user permission. |
typeFilter |
"activity", "mention", "reaction" |
Optionally filters the notifications to only show notifications of the specified type. |
Learn more about attributes and properties.
Events
| Name | Type | Description |
|---|---|---|
wy-notification |
WyNotificationEventType |
Emitted when a notification should be shown. |
wy-link |
WyLinkEventType |
Emitted when a notification is clicked. |
Learn more about events.