Skip to content

egoist/vue-slim-modal

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

A slim modal component for Vue.js

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published