Dialog

Under Development
# Documentation

Lv Dialog helps the user to have modal and additional dialog box with their data.

#Basic Usage

LightVue comes with some stunning designs for dialog.There are different types of dialog present in lightVue you can go through this page for more info. LightVue dialog is Both compatible with Vue 2.x and Vue 3.x

#Model

You can add left and right icons to the Button component using the icon and icon-right props respectively.(The icons can be String)
You can also use Light Icons from LightVue and pass it into the button.

#Confirmation

You can add left and right icons to the Button component using the icon and icon-right props respectively.(The icons can be String)
You can also use Light Icons from LightVue and pass it into the button.

#Maximizable

You can add left and right icons to the Button component using the icon and icon-right props respectively.(The icons can be String)
You can also use Light Icons from LightVue and pass it into the button.

#Positions

You can add left and right icons to the Button component using the icon and icon-right props respectively.(The icons can be String)
You can also use Light Icons from LightVue and pass it into the button.

#Setup

You can import a component and register it as a local and global vue component as follows:

// import the component
import LvDialog from 'lightvue/dialog';
// Register the component locally
export default {
    components: {
        LvDialog
    }
}
// Register the component globally (Vue 2.x)
Vue.component('LvDialog', LvDialog);

// Register the component globally (Vue 3.x)
const app = Vue.createApp({
  // ...
});
app.component('LvDialog', LvDialog);
app.mount('#app')
               

#APIs

All of the props, events and slots of the component are mentioned below:

Props
Type
Default
Description
header
String
Defines the header value
footer
String
Defines the footer value
visible
Boolean
true
Controls the visibility of Dialog
contentStyle
String
Defines the content Style of the Dialog
maximizable
Boolean
true
Configures if the dialog will be maximizable or not
closable
Boolean
true
Configures if the dialog will be closable or not
showHeader
Boolean
true
Configures if the dialog will be showing header or not
baseZIndex
Number
0
Configures the base Z index of the Dialog
autoZIndex
Boolean
true
Configures z index automatically if passed.
position
String
center
Configures position of dialog box
ariaCloseLabel
String
close
Configures close label of Dialog
Events
Parameters
Description
input-native
value:  String
Input element with rounded corners