1.0.4 • Published 7 years ago
vue-slim-modal v1.0.4
vue-slim-modal
Features
- Functional component
- Minimal design
- Light-weight, 1KB and that's all!
Install
yarn add vue-slim-modal
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
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Development
Run the example with Poi:
cd vue-slim-modal
yarn
yarn dev