@appoly/vue-modal NPM

Vue Modal

Installation

Install Vue Modal with npm

npm install @appoly/vue-modal

Props

Prop	Type	Default	Description
`confirmButtonText`	`string`	Confirm	Text displayed on the confirm button
`confirmButtonClass`	`string`		Custom class for the confirm button
`closeOnOutsideClick`	`bool`	`true`	Close the modal by clicking on the outside
`showConfirmButton`	`string`	`true`	Display the confirm button
`cancelButtonText`	`string`	Cancel	Text displayed on the cancel button
`cancelButtonClass`	`string`		Custom class for the cancel button
`closeOnButtonClick`	`bool`	`true`	Modal can be closed on cancel/confirm click or an event is emitted and can be closed via functions
`escClosesModal`	`bool`	`true`	Should the modal close if the Esc key is pressed (and `closeOnOutsideClick` is True)
`animation`	`string`	`zoom`	Animation type, options include `zoom, bounce, fade & none`
`timeout`	`number`	`0`	Should the modal automatically close, time set in milliseconds
`width`	`string`	`700px`	Width of the modal in px, rem, em, %. Just numbers default to px
`maxHeight`	`string`	`75%`	Height of the modal in px, rem, em, %. Just number default to px
`sticky-header`	`bool`	`false`	Should the modal have a sticky header
`sticky-footer`	`bool`	`false`	Should the modal have a sticky footer

Slots

Slot	Description
`header`	Content for the top of the modal
`body`	Content for the center of the modal
`footer`	Content for the bottom of the modal (above the buttons)
`buttons`	Replaces the buttons

Usage/Examples

import VueModal from '@appoly/vue-modal';

<VueModal ref="myModal" timeout="5000">
    <template #header>
        <h1>My Modal</h1>
        <hr>
    </template>
    <template #body>
        <p>This modal will hide in 5 seconds</p>
    </template>
</VueModal>