cube-vue-modal
A simple, basic, highly customizable and mobile friendly modal component for Vue.
Key features
- Easy to use
- Simple HTML structure
- CSS customizable
- Large content support — addresses the well-known Safari over-scroll chaining issue on iOS
Usage
Install
yarn add cube-vue-modal
Exemple
Template
<div id="App">
<p>Click the button below to open the modal.</p>
<button :disabled="open" @click="open = true">Open</button>
<Modal v-model="open">
<header>
<h1 class="modal-title">Title</h1>
</header>
<main>
<p>This is a content.</p>
</main>
<footer>
<button @click="open = false">Close</button>
</footer>
</Modal>
</div>
Script
import Modal from 'cube-vue-modal'
export default {
components: {
Modal
},
data() {
return {
open: false
}
}
}
SCSS
///
/// Import your own variables
///
@import 'assets/scss/variables';
///
/// Import modal style and animations
///
@import '~cube-vue-modal/src/scss';
/// Or ↴
@import '~cube-vue-modal/src/scss/variables';
@import '~cube-vue-modal/src/scss/modal';
@import '~cube-vue-modal/src/scss/animations';
Props
| Name |
Required |
Type |
Default |
Description |
| value |
false |
Boolean |
false |
The open state of the modal. |
| transition |
false |
String |
'animate' |
The name of the transition to use for opening and closing. |
| target |
false |
String, Object |
document.body |
The querySelector or the Element to append the modal to. |
Events
| Name |
Description |
| input |
The open state of the modal has changed. |
| open |
The modal is opened. |
| opened |
The modal is opened and the animation is finished. |
| close |
The modal is closed. |
| closed |
The modal is closed and the animation is finished. |
Methods
| Name |
Async |
Description |
| open |
true |
Opens the modal and resolves after the animation is finished. |
| close |
true |
Closes the modal and resolves after the animation is finished. |
| toggle |
true |
Switches between the open and close methods. |
HTML structure and classes
<div class="modal">
<div class="modal-backdrop"></div>
<div class="modal-dialog" role="dialog">
<button class="modal-dialog-close"></button>
<div class="modal-dialog-container">
<slot />
</div>
</div>
</div>
Development Setup
# Project setup
yarn install
# Compiles and hot-reloads for demo web site development
yarn run serve
# Compiles and minifies for production
yarn run build
# Lints and fixes files
yarn run lint
# Run the unit tests
yarn run test:unit