@mtcmedia/vue-overlay NPM

@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