Dialogs

Dialogs very easy to implement and practical to use in any case and need.

Alert

To generate a dialog we have the global function $vs.dialog the parameters to generate the dialog are

  • title: title of the dialogue - String
  • text: internal text of the dialog - String
  • color: color of the component - Colors, RGB, HEX
  • accept: function that executes the user accept the dialog - Function
  • cancel: function that executes the user to cancel the dialog (if it is a confirm type) - Function
  • type: determines the type of dialog (alert or confirm) - alert, confirm
  • buttonAccept: determines the type of accept button - Boolean
  • buttonCancel: determines the type of cancel button - Boolean

Confirm

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.

Prompt

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>

API #

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