Notifications

Nice simple and interactive notifications.

Notifications Defaults

To add a notification we have the global function $vs.notify, as 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.

Positions

We can change the place where the notification appears with the property position a serious example position: 'top-right' the supported values are:

  • top-right
  • top-left
  • bottom-left
  • bottom-center
  • top-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 have icons to give a better user experience and report with a more pleasant and intuitive notification for this is the property icon a serious example: icon: 'chat'

TIP

Vuesax use the Google Material Icons font library. For a list of all available icons, visit the official Material Icons page.

Fixed and function click

There are times when we need to execute a function when the user clicks on the notification. For this, we have the property that clicks as a value to pass a function to it. Example: click:()=>{ ... }

Time

You can change the delay time in leaving the notification screen with the time property, example: time: 4000.

TIP

By default the notifications have a time of 2000 (2s)

API #

NameTypeParametersDescriptiondefault
$vs.notifyfunction(title,text,color,position,icon,click,fixed)Function that makes the notification appear.
titlestringTitle of the notification.
timeNumberWaiting time for notification to disappear.2s
textstringNotification text.
colorstringRGB, HEX, primary, success, danger, warning, darkBackground color of the notification.
positionstringRGB, HEX, primary, success, danger, warning, darkbottom-right, top-right, top-left, bottom-left, bottom-center, top-center.
positionstringbottom-right, top-right, top-left, bottom-left, bottom-center, top-centerPosision in which the notification appears.
iconstringIcon materialNotification Icon.
clickFunctionfunction(){ ... }, ()=>{ ... }Function executed by clicking on the notification
fixedBooleantrue, falseRemoves the automatic elimination of the notification