| 1 | # Overview
|
| 2 | mint-popup is a popup component for vue.js
|
| 3 |
|
| 4 | # Installation
|
| 5 | First, install `mint-popup` from npm:
|
| 6 | ```bash
|
| 7 | $ npm install mint-popup
|
| 8 | ```
|
| 9 |
|
| 10 | Import it:
|
| 11 | ```Javascript
|
| 12 | require ('mint-popup/lib/index.css');
|
| 13 |
|
| 14 | // ES6 mudule
|
| 15 | import Popup from 'mint-popup';
|
| 16 |
|
| 17 | // CommonJS
|
| 18 | const Popup = require('mint-popup').default;
|
| 19 | ```
|
| 20 |
|
| 21 | Register component:
|
| 22 | ```Javascript
|
| 23 | Vue.component('popup', Popup);
|
| 24 | ```
|
| 25 |
|
| 26 | Then use it:
|
| 27 | ```html
|
| 28 | <popup :visible.sync="popupVisible" position="bottom"></popup>
|
| 29 | ```
|
| 30 |
|
| 31 | # Usage
|
| 32 | `position` defines the location of the popup. If it's `bottom`, when you switch on the popup, it'll slide into the screen from the bottom and become fixed at the bottom.
|
| 33 |
|
| 34 | If the `position` attribute is omitted, the popup will be located at the center of the viewport (and of course you can relocate it using CSS). In this case, you may want to set its `popup-transition` attribute to `popup-fade` so that it'll have a fading effect when switched on/off.
|
| 35 |
|
| 36 | Sync `visible` with one of your vue instance variables. Toggle it to switch on/off the popup.
|
| 37 |
|
| 38 | # API
|
| 39 | | Option | Description | Value | Default |
|
| 40 | |-------------------|-------------------------------------------------------------|-------------------------------|---------------|
|
| 41 | | visible | visibility of the popup | Boolean | 'false' |
|
| 42 | | position | location of the popup | 'top' 'right' 'bottom' 'left' | |
|
| 43 | | pop-transition | CSS transition of the popup | 'popup-fade' 'popup-slide' | 'popup-slide' |
|
| 44 | | modal | determines if a modal pops with the popup | Boolean | true |
|
| 45 | | closeOnClickModal | determines if the popup turns off when the modal is clicked | Boolean | true |
|
| 46 |
|
| 47 | # License
|
| 48 | MIT
|