# mint-popup

> A mobile popup component for vue.js

Latest version **2.0.0** (published 2016-10-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install mint-popup
pnpm add mint-popup
yarn add mint-popup
bun add mint-popup
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2016-10-29 |
| First published | 2016-05-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | yi.shyang@ele.me |
| Maintainers | qingwei.li, yi.yang |

## Links

- npm: https://www.npmjs.com/package/mint-popup
- Repository: https://github.com/mint-ui/mint-popup
- Homepage: https://github.com/mint-ui/mint-popup#readme
- Issues: https://github.com/mint-ui/mint-popup/issues
- npm.io page: https://npm.io/package/mint-popup

## Dependencies (1)

- [vue-popup](https://npm.io/package/vue-popup.md) ^0.2.9

## Recent versions

- 2.0.0 (latest) — 2016-10-29
- 0.1.0 (lerna-temp) — 2016-06-13
- 0.0.4 — 2016-06-08
- 0.0.3 — 2016-06-01
- 0.0.2 — 2016-05-28
- 0.0.1 — 2016-05-27

## README

# Overview
mint-popup is a popup component for vue.js

# Installation
First, install `mint-popup` from npm:
```bash
$ npm install mint-popup
```

Import it:
```Javascript
require ('mint-popup/lib/index.css');

// ES6 mudule
import Popup from 'mint-popup';

// CommonJS
const Popup = require('mint-popup').default;
```

Register component:
```Javascript
Vue.component('popup', Popup);
```

# Example

`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. The sliding animation alters with `position`, and you don't need to configure it manually.

Bind `v-model` with one of your vue instance variables. Toggle it to switch on/off the popup.

```html
<mt-popup
  v-model="popupVisible"
  position="bottom">
  ...
</mt-popup>
```

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.

```html
<mt-popup
  v-model="popupVisible"
  popup-transition="popup-fade">
  ...
</mt-popup>
```

# API
| option | description | type | acceptable values | default |
|------|-------|---------|-------|--------|
| position | location of the popup. If omitted, the popup will be centered  | String | 'top'<br>'right'<br>'bottom'<br>'left' | |
| pop-transition | CSS transition of the popup. Configurable only when `position` is omitted | String | 'popup-fade' | |
| modal | if a modal pops with the popup | Boolean | | true |
| closeOnClickModal | if the popup turns off when the modal is clicked | Boolean | | true |

# Slot
| name | description |
|------|--------|
| - | content of the popup |

# License
MIT

---
_Source: https://npm.io/package/mint-popup · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._