Alert

Notifications to the user in time of execution with good animation and functionality

Default

To add a notification we have the vs-alert component that as the main parameter needs the vs-active property that determines if the alert is visible or not.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

Title

The alert can have a title with the property vs-title and its value would be the desired title

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

Color

You can change the color of the alert with the property vs-color, the colors can be the mainprimary, success,danger, warning,dark or the colors RGB, HEX.

WARNING

Only RGB and HEX colors are supported.

Primary

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

Success

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

Danger

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Danger

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Dark

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

RGB

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

HEX

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

Closable

You can show and hide the alert by means of vs-active.sync and a Boolean bind as value.

The property to determine if the alert can be closed is vs-closable.

close
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

Icons

You can add to the alert a descriptive icon with the property vs-icon and as a value the icon of Material Icons

TIP

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

sms
sms
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

Example of use

An example of serious use to have an input and when a condition is met show the vs-alert.

0123456789
error
check_circle
new_releases
the value is invalid you can only enter numbers

API #

NameTypeParametersDescriptiondefault
vs-activeBooleantrue, falseDetermines if the component is visible.false
vs-titleStringTitle of the alert
vs-closableBooleanDetermines if the alert can be closed by the userfalse
vs-colorStringprimary, success, danger, warning, dark, RGB, HEXColor of the alertfalse
vs-marginStringMangin of the alert (top, bottom)10px
vs-iconStringDetermines the alert icon