1.0.4 • Published 7 years ago

vue-slim-modal v1.0.4

Weekly downloads
1,268
License
MIT
Repository
github
Last release
7 years ago

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

1.0.4

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago

0.3.0

8 years ago

0.2.1

8 years ago

0.2.0

8 years ago

0.1.0

8 years ago