Vue modern notification

Appearance

Notification ​

Default ​

Position ​

Change the notification position with the position property

supported values

  • bottom-right
  • top-right
  • top-center
  • top-left
  • bottom-left
  • bottom-center

Color ​

Use the color property to change the base color of the component and some of the child components.

Allowed values are:

  • primary
  • secondary
  • success
  • warning
  • danger
  • dark
  • info
  • light

Icons ​

Add the icon provided as the value of the icon property to the notification

Progress ​

To show progress bar set showProgress option to true.

WARNING

If duration is set to false no progress will be displayed.

Duration ​

Change the duration of the notification with the duration property, the value is numerical and determine the seconds before the bone component is hidden that 10s equals 10000 as the value

If you need the notification to never be hidden, the duration value would be false

Square ​

Change the style of the notification with the square property so as not to have border-radius making it a rectangle

Border ​

Change the notification style with the border property by adding a border of the color provided as the value

Flat ​

Change the style of the notification with the flat property, having this property changes to lighter colors and the text of the color of the color property, this property is a boolean so you can only use the value true

Width ​

Change the size of the notification to the total screen with the property width and giving it a value of 100%

If you need the notification to have a custom size you can do it by setting the value you need, For example:- 50%, 100px, 10rem etc. By default the width is set automatically while opening.

Sticky ​

You can add a style to the paste component to the nearest corner with the sticky property, this property is a boolean po which can only have the value true

No Padding ​

You can set noPadding property to true to set the notification padding to none. This is helpful when using a custom component inside the notification.

Custom Component ​

You can pass a custom component as the content of the notification box. This is really amazing, it makes our plugin unique and opens up the path to the most customizable opportunities.

TIP

Documentation of this part is being written