Easy Accessible Dialog/Modal For Vue – VEasyDialog

Description:

An easy, fast, accessible, animated, and stackable modal dialog component for Vue.js.

Feature List:

  • Esc Key to dismiss
  • Auto traps focus within Dialog
  • Supports scrollable dialog content
  • Smooth transitions
  • Optional persistent prop for when you require user’s input to proceed
  • Fullscreen mode

How to use it:

1. Import and register the component.

import VEasyDialog from 'v-easy-dialog'
export default {
  components: {
    VEasyDialog
  }
}

2. Create a basic modal dialog.

<v-easy-dialog v-model="simpleDialog">
  Dialog Content Here
</v-easy-dialog>
}

3. Available props to config the dialog.

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:

easy-accessible-dialog-modal

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

You Might Be Interested In:

Tags:

Add Comment