@shapla/vue-modal v1.0.1

Shapla Modal

A classic modal overlay component for Vue 3, in which you can include any content you want.

Table of contents

• Installation
• Usage

Installation

npm install --save @shapla/vue-modal

Usage

Styles

import '@shapla/vue-modal/src/index.scss';

with CSS:

import '@shapla/vue-modal/dist/style.css';

Note: @shapla/vue-modal component has dependency over @shapla/vue-cross, also remember to include that style

Javascript Instantiation

import ShaplaModal from '@shapla/vue-modal';

export default {
  name: 'Hello',

  components: {
    ShaplaModal
  },

  data () {
    return {
        modalActive:true,
    };
  },
  
  methods: {
    closeModal(){
      this.modalActive = false;
    }
  }
}

<button @click="modalActive = true">Open Modal</button>
<shapla-modal :active="modalActive" title="Modal Title" content-size="full" @close="closeModal">
    Modal content goes here.
    <div slot="foot">
        <button @close="closeModal">Close</button>
    </div>
</shapla-modal>

Props

*Note: small has content width 320px, medium has content width 640px, large has content width 960px and full will take full browser width

Listeners

The modal component fires the following events:

close: When close icon or outside content area is clicked, it fires the event.

<!-- template -->
<shapla-modal @close="closeModal">
  <!-- Modal content goes here -->
</shapla-modal>


<!-- method -->
methods: {
  closeModal(){
    this.modalActive = false;
  }
}