Dialog

# Dialog

# Default

Documentation Vuesax 4.0+

These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 👉 Vuesax 3.x

It generates a Dialog with the vs-dialog component, this component is very customizable since it provides a slot to put and make any type of interface to the user's need

Code copied

# Type

You can easily create the most common types of dialogs such as Alert, Confirm or Prompt using the different slots for the structure of the header,default, footer dialog

Code copied

# loading

Add a loading animation to the dialog with the loading property

Code copied

# Not close

You can remove the close button with the not-close property

Code copied

# Scroll

There are cases where you need a scroll because there is a lot of information within the dialog for this you can use the scroll property

Code copied

# Overflow Hidden Body

If you need to remove the page scroll when opening the dialog you can do it with the overflow-hidden property

Code copied

# Not Padding

If you need to remove the padding from the dialog to make a more personalized interface you can do it with the not-padding property

Code copied

# Nested Dialogs

You can nest as many vs-dialog as you need without problem

Code copied

# full Screen

If you need the dialog to be the total window size you can do it with the full-screen property

Code copied

# blur

You can add a blur style to all the elements behind the dialog with the blur property, this functionality depends on the css property backdrop-filter

Code copied

# Square

Change the dialog style by removing the border radius and making it rectangular

Code copied

# Prevent Close

With the prevent-close property you do not close the dialog by clicking outside or pressing the esc key

Code copied

# API

props

Property Type Values Description default Example More
v-model Boolean truefalse Determine if the dialogue is visible or hidden. false Usage Open Close
<vs-dialog v-model="active">
  ...
</vs-dialog>
not-center boolean true.false By default the header centers the elements, with this property the centering is eliminated. false Usage Open Close
<vs-dialog not-center v-model="active">
  ...
</vs-dialog>
width String px Determine the width of the dialog. Usage Open Close
<vs-dialog width="550px" v-model="active">
  ...
</vs-dialog>
loading Boolean truefalse Add a loading animation to the dialog. false Usage Open Close
<vs-dialog loading v-model="active">
  ...
</vs-dialog>
not-close Boolean truefalse Remove the close button from the dialog. false Usage Open Close
<vs-dialog not-close v-model="active">
  ...
</vs-dialog>
scroll Boolean truefalse Makes the content a maximum high and gives the possibility to overflow the content add scroll. false Usage Open Close
<vs-dialog scroll v-model="active">
  ...
</vs-dialog>
overflow-hidden Boolean truefalse When the dialog is opened, the page scroll is deleted. false Usage Open Close
<vs-dialog overflow-hidden v-model="active">
  ...
</vs-dialog>
auto-width Boolean truefalse It makes the dialog have an automatic width to its content. false Usage Open Close
<vs-dialog auto-width v-model="active">
  ...
</vs-dialog>
not-padding Boolean truefalse Eliminates the padding of the base elements of the dialog. false Usage Open Close
<vs-dialog not-padding v-model="active">
  ...
</vs-dialog>
full-screen Boolean truefalse Makes the dialog the size of the window. false Usage Open Close
<vs-dialog full-screen v-model="active">
  ...
</vs-dialog>
blur Boolean truefalse Makes all elements blur when the dialog opens. false Usage Open Close
<vs-dialog blur v-model="active">
  ...
</vs-dialog>
square Boolean truefalse Remove the border radius from the dialog. false Usage Open Close
<vs-dialog square v-model="active">
  ...
</vs-dialog>
prevent-close Boolean truefalse It makes the dialog cannot be closed by clicking outside or by pressing the esc key. false Open Close
<vs-dialog prevent-close v-model="active">
  ...
</vs-dialog>

slots

Property Type Values Description default Example More
slot name slot texto descriptivo. Usage Open Close
...
Last Updated: 3/3/2020, 3:21:13 AM