Drawer
Under Development
# Playground
Realtime Customizations
#Basic Usage
LightVue comes with some stunning designs for Drawer.There are different variations and customization of drawer present in lightVue you can go through this page for more info. LightVue Drawer is Both compatible with Vue 3.x and Vue 2.x
#Absolute
If you set absolute prop true.The drawer will open relative to the container
#Setup
You can import a component and register it as a local and global vue component as follows:
// import the component
import LvDrawer from 'lightvue/drawer';
// Register the component locally
export default {
components: {
LvDrawer
}
}// Register the component globally (Vue 2.x)
Vue.component('LvDrawer', LvDrawer);
// Register the component globally (Vue 3.x)
const app = Vue.createApp({
// ...
});
app.component('LvDrawer', LvDrawer);
app.mount('#app')
#APIs
All of the props, events and slots of the component are mentioned below:
Props
Type
Default
Description
top
Boolean
false
Defines the orientation of drawer.
right
Boolean
false
Defines the orientation of drawer.
bottom
Boolean
false
Defines the orientation of drawer.
left
Boolean
true
Defines the orientation of drawer.
close
Boolean
Defines the orientation of drawer.
shadow
Boolean
Defines the orientation of drawer.
backdropBlur
Boolean
Defines the orientation of drawer.
customStyle
Object
Defines the orientation of drawer.
headerTitle
String
Defines the heading of the LvDrawer.
backdropOpacity
String
0.3
Defines the opacity of backdrop.
absolute
Boolean
false
Defines whether the position is absolute or not.
noBackdrop
Boolean
false
Defines whether the backdrop effect applied or not.
width
Number
250
Defines the width of drawer.
height
Number
250
Defines the height of drawer.
percentWidth
Number
Defines the width of drawer in percent.
percentHeight
Number
Defines the Height of drawer in percent.
zIndex
Number
10
Defines the z-index of drawer.
maxSpan
Number
70
Defines the max-span of drawer in percent.
background
String
#ffffff
Defines the background color of drawer.
headerColor
String
#000000
Defines the color of heading.
headerBackground
String
#fff
Defines the background color of header.
headerFontSize
String
20px
Defines the font-size of header.
padding
String
0px
Defines the padding to drawer.
noBottom
Boolean
false