Dialogs very easy to implement and practical to use in any case and need.
To generate a dialog we have the global function $vs.dialog
the parameters to generate the dialog are
If you need a dialog of type confirm you can do it just by changing the type as a parameter inside the main function.
TIP
To do some action when the user approves or confirms we have the property accept:myFunctionAccept
.
To add a dialog of type prompt we have a global function a completely independent component vs-prompt
. This allows more flexibility with the input and ability to add any type of input and components.
TIP
The properties of the component are equivalent to those of the global function only with the vs before each property something like
function = color
component = vsColor
<div slot="input">
<input v-model="val" type="text" name="" value="">
</div>
Name | Type | Parameters | Description | default |
---|---|---|---|---|
active.sync | Boolean | Define if the dialog is active (visible). | false | |
title | String | Main title of the dialog. | Dialog | |
color | String | Dialog color and accept buttons. | primary | |
accept | function | function that is executed when the user approves the dialog. | ||
cancel | function | Function that executes the user cancel the dialog. | ||
close | function | function that is executed when the dialog as closed. | ||
is-valid | Boolean | Determines if it is valid to be able to accept at the prompt. | ||
buttons-hidden | Boolean | Determines if the component has hidden or visible buttons. | false | |
button-accept | type buttons | Change the type of botton for the accept. | false | |
button-cancel | type buttons | Change the type of botton for the cancel. | filled | |
accept-text | String | Change the text of the accept button. | Accept | |
cancel-text | String | Change the text of the cancel button. | Cancel | |
icon-pack | String | Icon Pack Class Name | Icon Pack to be used. If not set, icon will default to Material Icons. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal. | material-icons |