Description:
An easy yet configurable dialog box component for Vue.js.
Features:
- Stackable.
- Scrollable
- Fullscreen mode just like the modal
- Automatic focus trap
- Smooth open/close transitions.
How to use it:
1. Import and register the component.
import VEasyDialog form 'v-easy-dialog' export default { components: { VEasyDialog } }
2.Create a basic dialog with a close button.
<v-easy-dialog v-model="simpleDialog"> Dialog Content Here <button @click="simpleDialog = false">Close</button> </v-easy-dialog>
3. Possible component props to config the dialog box.
value: { type: Boolean, default: false }, width: { type: String, default: '600px' }, growContent: { type: Boolean, default: true }, maxHeight: { type: String, default: '90%' }, fullscreen: { type: Boolean, default: false }, backgroundBtnTag: { type: String, default: 'button' }, persistent: { type: Boolean, default: false }, backdropClass: { type: undefined }, backdropStyle: { type: undefined }, focusOn: { type: String, default: undefined }
Preview:
Download Details:
Author: WoodyDark
Live Demo: https://r2xwr.csb.app/
Download Link: https://github.com/WoodyDark/v-easy-dialog/archive/main.zip
Official Website: https://github.com/WoodyDark/v-easy-dialog
Install & Download:
# Yarn
$ yarn add v-easy-dialog
# NPM
$ npm i v-easy-dialog --save