vue-slim-modal

Slim modal component for Vue.js

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-slim-modal
1231.0.47 years ago8 years agoMinified + gzip package size for vue-slim-modal in KB

Readme

vue-slim-modal
NPM version NPM downloads Build Status donate

Features

  • Functional component
  • Minimal design
  • Light-weight, 1KB and that's all!

Install

yarn add vue-slim-modal

CDN: UNPKG | jsDelivr

Usage

<template>
  <div id="example">
    <button @click="toggle">Toggle Modal</button>
    <modal :is-open="isOpen">
      <h2>title></h2>
      <p>text goes here...</p>
    </modal>
  </div>
</template>

<script>
import Modal from 'vue-slim-modal'

export default {
  components: { Modal },
  data() {
    return { 
      isOpen: false
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

<!-- Optionally use our default style -->
<style src="vue-slim-modal/themes/default.css"></style>

Vist https://egoistian.com/vue-slim-modal (source code) for an online demo.

Props

<Modal>

Add attributes excepts below props will go to .modal element, eg: <Modal class="foo" /> results in:
<div class="modal-overlay">
  <div class="foo modal">
  </div>
</div>

isOpen

Type: boolean
Default: false

isCenter

Type: boolean
Default: false
Position the modal at absolute center, by default it's 100px from the top.

clickOutside

Type: function
Default: noop
The function to invoke as user clicks outside the modal.

overlayClass

Type: string
Default: undefined
Add extra class name to .modal-overlay element.

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Development

Run the example with Poi:
cd vue-slim-modal
yarn
yarn dev

License

MIT © EGOIST