@mtcmedia/vue-overlay

Install to production site

npm install @mtcmedia/vue-overlay

Usage

import MtcOverlay from '@mtcmedia/vue-overlay'

Vue.component('MtcOverlay', MtcOverlay)

<button @click.prevent="showOverlay = true">Open Overaly</button>
<MtcOverlay
    :is-visible="showOverlay"
    @closeOverlay="showOverlay = false"
>
    <!-- this is the main slot -->
    <h2>Add overlay content here!</h2>
    <p>This can be anything</p>
</MtcOverlay>

Props

The component accepts these props:

| Attribute | Type | Default | Description | | :--- | :--- | :--- | :--- | | is-visible | Boolean | false | Show the overlay by passing data that can be toggled | | title | String | empty | Define a title for your overlay - populates aria-label on the overlay | | site-wrapper | String | .siteWrapper | Define a selector for your site container. Needed to keep scroll position on open of overlay |

Slots

The component accepts these slots:

• default : the content of the overlay
• icon : change the icon used for the close button, this can be anything

Events

The component fires the following events:

| Attribute | Description | | :--- | :--- | | closeOverlay | Fires when user clicks on close button, overlay shadow or presses escape key. Use this to set is-visible back to false to hide the overlay | | beforeOpen | Fires before the overlay transitions into view | | afterOpen | Fires after the overlay transitions into view | | afterClose | Fires after the overlay transitions out of view |

Development Setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your unit tests

npm run test:unit

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.