@dymantic/modal

0.2.0 • Public • Published

A minimalist Vue modal component

Build Status

A bare-bones, minimal approach to a reusable modal component.

  • pass content in as default slot, caller has control over modal window structure
  • simple, unobtrusive transition
  • manage open/close by prop only
  • emits "close" event on ESC keypress

Example Usage

//in your own SFC
<template>
    <div>
        <button type="button" @click="showModal = true">Show the modal</button>
        <modal :show="showModal" @close="showModal = false">
            Wow, what an amazing modal!
            <button type="button" @click="showModal = false">Show the modal</button>
        </modal>
    </div>
</template>

<script>
import Modal from "@dymantic/modal"

export default {
    components: {
        Modal
    },

    data() {
        return {showModal: false};
    }
}
</script>

Installation

npm install @dymantic/modal

Readme

Keywords

none

Package Sidebar

Install

npm i @dymantic/modal

Weekly Downloads

1

Version

0.2.0

License

none

Unpacked Size

155 kB

Total Files

20

Last publish

Collaborators

  • dymantic