/ Modal

Reusable Modal component supports own custom HTML and classes

Reusable Modal component supports own custom HTML and classes

Vue Modal

Reusable Modal component, supports own custom HTML, text and classes and/or passing a component. Featuring multiple modal content / buttons.

Vue-Modal

Installation

npm i @melmacaluso/vue-modal

Usage

Simply import it in your desired vue component as follows:

import Modal from "@melmacaluso/vue-modal";

Props

Prop Type Comment
btnText String Text label for modal button
modalContent String Pass here your html for the modal main modal
closeBtn Boolean Conditionally add a close button
closeBtn-content String Pass here your html for the close button
inception Boolean Allow multiple buttons/content within the modal
modals Array Pass here an array of objects, they retain the same props within the array's scope ie. <scope>.btnText
showNav Boolean Conditionally show a navigation within the Modal's contents
@before-open Boolean Attach here your custom function, it will be invoked before the modal opens
@before-close Boolean Attach here your custom function, it will be invoked before the modal closes

Example (inline HTML):

<Modal
  btnText="Press me, senpai 😊"
  modalContent="
        <div>
          <h2> Hello I am a modal</h2>
          <p>I like stating the obvious: <b>the obvious</b></p>
          <p>Now, try this trick: <code>Ctrl + Shift + W </code> 😉</p>
        </div>
        "
  :closeBtn="true"
  closeBtn-content="
        <span>X</span>
        "
/>

Example (Passing component):

<Modal
  btnText="Press me, senpai 😊"
  :closeBtn="true"
  closeBtnHTML="<span>X</span>"
>
  <ExampleComponent/>
</Modal>

Example (multiple buttons & modal content) + custom functions:

<Modal
  :inception="true"
  @before-open="yourOpenFn()"
  @before-close="yourCloseFn()"
  :modals="[
    {
      btnText: 'Press me 1',
      modalContent: 'This is <strong>the</strong> content 1'
    },
    {
      btnText: 'Press me 2',
      modalContent:
        '<img src=\'https://media.giphy.com/media/5exwXWg9u7yow/giphy.gif\'>'
    },
    {
      btnText: 'Press me 3',
      modalContent: 'This is the <h3>content 3</h3>'
    }
  ]"
  :showNav="true"
/>

GitHub