Stackable Scrollable Dialog Box Component – v-easy-dialog

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:

Stackable Scrollable Dialog Box Component - v-easy-dialog

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

You Might Be Interested In:

Tags:

Add Comment