Notifications component
<wy-notifications> | WyNotifications
Weavy notifications component to render a list of notifications. Weavy automatically creates notifications for reactions, mentions and other activities.
The notifications can be clicked or marked as read or unread. When clicked the notification fires a "wy-link" event with information about the originating Weavy component for the notification. This can be used to handle navigation in the app, back to where the originating Weavy component is placed.
The notification button component can optionally be tailored to only show notifications for a specific app or notifications of a specific type, such as mentions or reactions. When setting a predefined notification type, it removes the possibility for the user to filter the list by type in the UI.
Complement this with the
<wy-notification-toasts>component to also get realtime in-app notifications or browser notifications.
Component layout
The component is block-level with pre-defined CSS styling to adapt to flex- and grid-layouts as well as traditional flow-layouts. It's usually recommended to use a proper flex-layout for the container you are placing the component in for a smooth layout integration.
The height grows with the content per default. Content is automatically loaded during scrolling when the last content becomes visible (aka infinite scrolling). If placed in a flex- or grid-layout or if an explicit height is set, the component becomes scrollable.
The content within the component is per default aligned to the edges of it's own box. It's recommended to add your default padding to the container or to the component to make it fit your design. If you want the component to go all the way to the edges of your container without any outermost roundness or padding, you can set the padding to 0 and set the --wy-border-radius-outer to 0 to make the component align nicely with the edge.
You can add additional styling using CSS Custom Properties and CSS Shadow Parts and further customization using slots.
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 { WyNotifications } from "@weavy/uikit-web";
Examples
Standard notification list
Display a list of all notifications for the authenticated user, placed in a container using a flex layout which the component adapts to.
<div style="display: flex; height: 100%;">
<wy-notifications></wy-notifications>
</div>
Filtered notification list by app
Display notifications for the authenticated user that originated from app with the specified uid.
<wy-notifications uid="test-chat"></wy-notifications>
Filtered notification list by type
Display notifications that is of type mention only.
<wy-notifications typeFilter="mention"></wy-notifications>
HTML attributes
Attributes can be set when using the component in HTML. All attributes have corresponding Javascript properties.
Most attributes are optional and/or has sensible default values. Any required attributes are indicated with an asterisk (*).
Learn more about attributes and properties.
| Attribute | Value | Description |
|---|---|---|
generateUid |
string |
Generates a uid by appending user and agent identifiers to the supplied string. |
typeFilter |
"activity", "mention", "reaction" |
Optionally filters the notifications to only show notifications of the specified type. |
uid |
string, number |
Optional filter to only show notifications for app with uid. |
JavaScript properties
Properties can be used in JavaScript. Some of them have corresponding HTML attributes where applicable.
| Name | Type | Default | Description |
|---|---|---|---|
app |
AppType |
App data when using uid. |
|
generateUid |
string |
Sets the uid property with automatically appended user and agent name (where applicable). |
|
typeFilter |
"", "activity", "mention", "reaction" |
"" |
Notification type filter applied when loading notifications. |
uid |
string, number |
Optional filter to only show notifications for app with uid. |
|
unread |
number |
readonly | Current unread notification count. |
JavaScript methods
Methods for the component are available in JavaScript. Methods that are async return a promise.
| Name | Returns | Description |
|---|---|---|
markAllAsRead() |
async | Marks all tracked notifications as read. |
reset() |
Sets the component to it's initial state and resets the app state. |
|
subscribe(subscribe: boolean) |
async | Subscribes or unsubscribes to notification updates from the app. Check .app.is_subscribed to see current state. |
whenApp() |
async AppType |
Waits for app data and returns the data when available. |
DOM Events
The component triggers custom events that bubbles up the DOM tree. They can be listened to using the addEventListener() method.
Learn more about events.
| Name | Type | Description |
|---|---|---|
wy-action |
WyActionEventType |
Emitted when a notification is selected. |
wy-app |
WyAppEventType |
Emitted when the app changes. |
wy-unread |
WyUnreadEventType |
Emitted when the number of unread notifications displayed in the component changes. |
wy-link |
WyLinkEventType |
Emitted when a notification is clicked. |
Slots
The slots can be used to inject elements into the component. All predefined child nodes of the slot will be replaced with the injected content.
| Slot | Description |
|---|---|
actions |
Action buttons placed in the right side of the notification header. Replaces existing buttons. |
To prevent child nodes from rendering before the component has loaded you can hide them using CSS.
wy-notifications:not(:defined) {
display: none;
}