cube-vue-modal v1.0.9

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

Events

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