11

Github GitHub - kouts/vue-modal: A customizable, stackable, and lightweight moda...

 3 years ago
source link: https://github.com/kouts/vue-modal
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

vue-modal

A customizable, stackable, and lightweight modal component for Vue.

vue-modal is designed with web applications in mind and tries to stick as much as possible to the accessibility best practices set in the WAI-ARIA Dialog (Modal) section of W3C.

Features at a glance

  • Lightweight, minified gzipped version is < 4kb
  • Opens and closes with a data variable using v-model
  • Includes sensible default styling but it's also highly customizable via user CSS classes and styles
  • Override modal title and content via slots
  • Modal intro and outro effects using CSS animation classes
  • Exposes Component events - close, before-open, opening, after-open, before-close, closing, after-close
  • Scrollable when it's contents exceed screen height
  • Closeable by clicking on the upper right "x", the overlay or the esc key
  • Stackable - Multiple modal windows on top of each other
  • Ability to set initial focus on an element when the modal window opens, just set the autofocus attribute on an element inside the modal
  • Focus management trapps keyboard focus - tabbed navigation inside the modal window
  • Ability to have unclosable modal windows
  • Render on demand or stay always in DOM with "live" mode
  • Modals appended to <body> by default, ability to append to a custom element

Browsers support


IE / Edge
Firefox
Chrome
Safari
Opera IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions

Click here for documentation and examples https://vue-modal-demo.netlify.app/

Development

In order to start development:

npm i
npm run watch

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK