Notifications
Nice, simple, and interactive notifications.
Notifications Defaults
To add a notification we have the global function $vs.notify. The first parameter is a json with all the necessary attributes, or if we only want the standard notification we can only add a string with the text of the notification.
TIP
For Composition API, you can use inject to retrieve $vs :
import { inject } from 'vue'
const $vs = inject('$vs')
$vs.notify({
title: 'Notification',
text: 'Lorem ipsum dolor sit amet, consectetur'
})
since vuesax3@^4.0.24
Positions
We can change the place where the notification appears with the property position. A practical example would be: position: 'top-right'. The supported values are:
top-righttop-leftbottom-leftbottom-centertop-center
WARNING
The default notifications appear bottom-right, it is not necessary to add the position property if it is the desired position.
Icons
Notifications can include icons to improve the user experience and to construct a more pleasant and intuitive notification. To make this, use the icon property. A practical example would be: icon: 'chat'.
TIP
Vuesax uses the Google Material Icons font library by default. For a list of all available icons, visit the official Material Icons page. Other icon libraries can be used by providing the class for the respective pack in the icon-pack property. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal.
Fixed and function click
Sometimes we need to execute a function when the user clicks on the notification. For this, pass a function to the click property. Example: click:()=>{ ... }
Time
You can change the total time that the notification stays on the screen with the time property. Example: time: 4000.
TIP
By default the notifications have a time of 2000 (2s)