Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/RobinCK/vue-popper
:whale: VueJS popover component based popper.js 🇺🇦
https://github.com/RobinCK/vue-popper
popover popper vue vue-component vuejs
Last synced: 1 day ago
JSON representation
:whale: VueJS popover component based popper.js 🇺🇦
- Host: GitHub
- URL: https://github.com/RobinCK/vue-popper
- Owner: RobinCK
- License: mit
- Created: 2017-05-08T19:07:59.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-07-11T00:09:04.000Z (over 1 year ago)
- Last Synced: 2024-10-29T23:43:28.780Z (15 days ago)
- Topics: popover, popper, vue, vue-component, vuejs
- Language: Vue
- Homepage: https://robinck.github.io/vue-popper/
- Size: 1.09 MB
- Stars: 439
- Watchers: 11
- Forks: 105
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# vue-popperjs
[](https://greenkeeper.io/)
VueJS popover component based on popper.js
## Example
[jsFiddle](https://jsfiddle.net/Robin_ck/n840tvp2/)
## Install
#### CDN
Recommended: https://unpkg.com/vue-popperjs, which will reflect the latest version as soon as it is published to npm. You can also browse the source of the npm package at https://unpkg.com/vue-popperjs/
#### NPM
``` bash
npm install vue-popperjs --save
```
#### Yarn
``` bash
yarn add vue-popperjs
```
#### Bower
``` bash
bower install vue-popperjs --save
```
## Development Setup
``` bash
# install dependencies
npm install
# build dist files
npm run build
```
## Usage
### VueJS single file (ECMAScript 2015)
```html
Popper Content
Reference Element
import Popper from 'vue-popperjs';
import 'vue-popperjs/dist/vue-popper.css';
export default {
components: {
'popper': Popper
},
}
```
### Browser (ES5)
```html
Popper Content
Reference Element
new Vue({
el: '#app',
components: {
'popper': VuePopper
}
});
```
## Props
| Props | Type | Default | Description |
| --------------------|:----------| ------------------------------------------------|--------------|
| disabled | Boolean | false | |
| delay-on-mouse-over | Number | 10 | Delay in ms before showing popper during a mouse over |
| delay-on-mouse-out | Number | 10 | Delay in ms before hiding popper during a mouse out |
| append-to-body | Boolean | false | |
| visible-arrow | Boolean | true | |
| force-show | Boolean | false | |
| trigger | String | hover | Optional value:
- **hover** - hover to open popper content
- **clickToOpen** - every click on the popper triggers open, only clicking outside of the popper closes it
- **clickToToggle** - click on the popper toggles it's visibility
- **click** (deprecated - same as **clickToToggle**)
- **focus** - opens popper on focus event, closes on blur. |
| content | String | null | |
| enter-active-class | String | null | |
| leave-active-class | String | null | |
| boundaries-selector | String | null | |
| transition | String | empty | |
| options | Object | { placement: 'bottom', gpuAcceleration: false } | [popper.js](https://popper.js.org/popper-documentation.html) options |
| data-value | Any | null | data of popper |
| stop-propagation | Boolean | false | |
| prevent-default | Boolean | false | |
| root-class | String | empty | Class name for root element |
## Events
| Name | Params | Description |
| ----------------|:-------------------------|--------------|
| created | context[Object] | Created popper component |
| show | | Show popover |
| hide | | Hide popover |
| document-click | | |
## Other my Vue JS plugins
| Project | Status | Description |
|---------|--------|-------------|
| [vue-ls](https://github.com/RobinCK/vue-ls) |  | Vue plugin for work with local storage, session storage and memory storage from Vue context |
| [vue-gallery](https://github.com/RobinCK/vue-gallery) |  | Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers |
## Contributors
### Code Contributors
This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
### Financial Contributors
Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/vue-popper/contribute)]
#### Individuals
#### Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/vue-popper/contribute)]
## License
[](https://app.fossa.io/projects/git%2Bhttps%3A%2F%2Fgithub.com%2FRobinCK%2Fvue-popper?ref=badge_large)
MIT © [Igor Ognichenko](https://github.com/RobinCK)