1 | <p align="center">
|
2 | <img width="250" src="https://cdn.rawgit.com/RobinCK/vue-popper/4431e4cc/doc/logo.png">
|
3 | </p>
|
4 |
|
5 | <p align="center">
|
6 | <a href="https://opencollective.com/vue-popper" alt="Financial Contributors on Open Collective"><img src="https://opencollective.com/vue-popper/all/badge.svg?label=financial+contributors" /></a>
|
7 | <a href="https://github.com/RobinCK/vue-popper"><img src="https://img.shields.io/badge/vuejs-2.x-brightgreen.svg?style=flat-square"></a>
|
8 | <a href="https://www.npmjs.com/package/vue-popperjs"><img src="https://img.shields.io/npm/dt/vue-popperjs.svg?style=flat-square"></a>
|
9 | <a href="https://david-dm.org/RobinCK/vue-popper"><img src="https://david-dm.org/RobinCK/vue-popper.svg?style=flat-square"></a>
|
10 | <a href="https://david-dm.org/RobinCK/vue-popper?type=dev"><img src="https://david-dm.org/RobinCK/vue-popper/dev-status.svg?style=flat-square"></a>
|
11 | </p>
|
12 |
|
13 | <p align="center">
|
14 | <a href="https://github.com/RobinCK/vue-popper"><img src="https://img.shields.io/bower/v/vue-popperjs.svg?style=flat-square"></a>
|
15 | <a href="https://github.com/RobinCK/vue-popper"><img src="https://img.shields.io/npm/v/vue-popperjs.svg?style=flat-square"></a>
|
16 | <a href="https://github.com/RobinCK/vue-popper/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/vue-popperjs.svg?style=flat-square"></a>
|
17 |
|
18 | </p>
|
19 |
|
20 | # vue-popperjs
|
21 |
|
22 | [![Greenkeeper badge](https://badges.greenkeeper.io/RobinCK/vue-popper.svg)](https://greenkeeper.io/)
|
23 | VueJS popover component based on <a href="https://popper.js.org/">popper.js</a>
|
24 |
|
25 | ## Example
|
26 |
|
27 | [jsFiddle](https://jsfiddle.net/Robin_ck/n840tvp2/)
|
28 |
|
29 | ## Install
|
30 | #### CDN
|
31 |
|
32 | 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/
|
33 |
|
34 | #### NPM
|
35 |
|
36 | ``` bash
|
37 | npm install vue-popperjs --save
|
38 | ```
|
39 |
|
40 | #### Yarn
|
41 |
|
42 | ``` bash
|
43 | yarn add vue-popperjs
|
44 | ```
|
45 |
|
46 | #### Bower
|
47 |
|
48 | ``` bash
|
49 | bower install vue-popperjs --save
|
50 | ```
|
51 |
|
52 | ## Development Setup
|
53 |
|
54 | ``` bash
|
55 | # install dependencies
|
56 | npm install
|
57 |
|
58 | # build dist files
|
59 | npm run build
|
60 | ```
|
61 |
|
62 | ## Usage
|
63 |
|
64 | ### VueJS single file (ECMAScript 2015)
|
65 | ```html
|
66 | <template>
|
67 | <popper
|
68 | trigger="clickToOpen"
|
69 | :options="{
|
70 | placement: 'top',
|
71 | modifiers: { offset: { offset: '0,10px' } }
|
72 | }">
|
73 | <div class="popper">
|
74 | Popper Content
|
75 | </div>
|
76 |
|
77 | <button slot="reference">
|
78 | Reference Element
|
79 | </button>
|
80 | </popper>
|
81 | </template>
|
82 |
|
83 | <script>
|
84 | import Popper from 'vue-popperjs';
|
85 | import 'vue-popperjs/dist/vue-popper.css';
|
86 |
|
87 | export default {
|
88 | components: {
|
89 | 'popper': Popper
|
90 | },
|
91 | }
|
92 | </script>
|
93 | ```
|
94 |
|
95 | ### Browser (ES5)
|
96 | ```html
|
97 | <link rel="stylesheet" href="vue-popper.css">
|
98 | <script type="text/javascript" src="popper.js"></script>
|
99 | <script type="text/javascript" src="vue.js"></script>
|
100 | <script type="text/javascript" src="vue-popper.js"></script>
|
101 |
|
102 | <div id="app">
|
103 | <popper
|
104 | trigger="clickToOpen"
|
105 | :options="{
|
106 | placement: 'top',
|
107 | modifiers: { offset: { offset: '0,10px' } }
|
108 | }">
|
109 | <div class="popper">
|
110 | Popper Content
|
111 | </div>
|
112 |
|
113 | <button slot="reference">
|
114 | Reference Element
|
115 | </button>
|
116 | </popper>
|
117 | </div>
|
118 |
|
119 | <script type="text/javascript">
|
120 | new Vue({
|
121 | el: '#app',
|
122 | components: {
|
123 | 'popper': VuePopper
|
124 | }
|
125 | });
|
126 | </script>
|
127 | ```
|
128 |
|
129 | ## Props
|
130 |
|
131 | | Props | Type | Default | Description |
|
132 | | --------------------|:----------| ------------------------------------------------|--------------|
|
133 | | disabled | Boolean | false | |
|
134 | | delay-on-mouse-over | Number | 10 | Delay in ms before showing popper during a mouse over |
|
135 | | delay-on-mouse-out | Number | 10 | Delay in ms before hiding popper during a mouse out |
|
136 | | append-to-body | Boolean | false | |
|
137 | | visible-arrow | Boolean | true | |
|
138 | | force-show | Boolean | false | |
|
139 | | trigger | String | hover | Optional value: <br><ul><li>**hover** - hover to open popper content</li><li>**clickToOpen** - every click on the popper triggers open, only clicking outside of the popper closes it</li><li>**clickToToggle** - click on the popper toggles it's visibility</li><li>**click** (deprecated - same as **clickToToggle**)</li><li>**focus** - opens popper on focus event, closes on blur.</li> |
|
140 | | content | String | null | |
|
141 | | enter-active-class | String | null | |
|
142 | | leave-active-class | String | null | |
|
143 | | boundaries-selector | String | null | |
|
144 | | transition | String | empty | |
|
145 | | options | Object | { placement: 'bottom', gpuAcceleration: false } | [popper.js](https://popper.js.org/popper-documentation.html) options |
|
146 | | data-value | Any | null | data of popper |
|
147 | | stop-propagation | Boolean | false | |
|
148 | | prevent-default | Boolean | false | |
|
149 | | root-class | String | empty | Class name for root element |
|
150 |
|
151 |
|
152 | ## Events
|
153 | | Name | Params | Description |
|
154 | | ----------------|:-------------------------|--------------|
|
155 | | created | context[Object] | Created popper component |
|
156 | | show | | Show popover |
|
157 | | hide | | Hide popover |
|
158 | | document-click | | |
|
159 |
|
160 | ## Other my Vue JS plugins
|
161 |
|
162 | | Project | Status | Description |
|
163 | |---------|--------|-------------|
|
164 | | [vue-ls](https://github.com/RobinCK/vue-ls) | ![npm](https://img.shields.io/npm/v/vue-ls.svg) | Vue plugin for work with local storage, session storage and memory storage from Vue context |
|
165 | | [vue-gallery](https://github.com/RobinCK/vue-gallery) | ![npm](https://img.shields.io/npm/v/vue-gallery.svg) | Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers |
|
166 |
|
167 | ## Contributors
|
168 |
|
169 | ### Code Contributors
|
170 |
|
171 | This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
|
172 | <a href="https://github.com/RobinCK/vue-popper/graphs/contributors"><img src="https://opencollective.com/vue-popper/contributors.svg?width=890&button=false" /></a>
|
173 |
|
174 | ### Financial Contributors
|
175 |
|
176 | Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/vue-popper/contribute)]
|
177 |
|
178 | #### Individuals
|
179 |
|
180 | <a href="https://opencollective.com/vue-popper"><img src="https://opencollective.com/vue-popper/individuals.svg?width=890"></a>
|
181 |
|
182 | #### Organizations
|
183 |
|
184 | 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)]
|
185 |
|
186 | <a href="https://opencollective.com/vue-popper/organization/0/website"><img src="https://opencollective.com/vue-popper/organization/0/avatar.svg"></a>
|
187 | <a href="https://opencollective.com/vue-popper/organization/1/website"><img src="https://opencollective.com/vue-popper/organization/1/avatar.svg"></a>
|
188 | <a href="https://opencollective.com/vue-popper/organization/2/website"><img src="https://opencollective.com/vue-popper/organization/2/avatar.svg"></a>
|
189 | <a href="https://opencollective.com/vue-popper/organization/3/website"><img src="https://opencollective.com/vue-popper/organization/3/avatar.svg"></a>
|
190 | <a href="https://opencollective.com/vue-popper/organization/4/website"><img src="https://opencollective.com/vue-popper/organization/4/avatar.svg"></a>
|
191 | <a href="https://opencollective.com/vue-popper/organization/5/website"><img src="https://opencollective.com/vue-popper/organization/5/avatar.svg"></a>
|
192 | <a href="https://opencollective.com/vue-popper/organization/6/website"><img src="https://opencollective.com/vue-popper/organization/6/avatar.svg"></a>
|
193 | <a href="https://opencollective.com/vue-popper/organization/7/website"><img src="https://opencollective.com/vue-popper/organization/7/avatar.svg"></a>
|
194 | <a href="https://opencollective.com/vue-popper/organization/8/website"><img src="https://opencollective.com/vue-popper/organization/8/avatar.svg"></a>
|
195 | <a href="https://opencollective.com/vue-popper/organization/9/website"><img src="https://opencollective.com/vue-popper/organization/9/avatar.svg"></a>
|
196 |
|
197 | ## License
|
198 | [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bhttps%3A%2F%2Fgithub.com%2FRobinCK%2Fvue-popper.svg?type=large)](https://app.fossa.io/projects/git%2Bhttps%3A%2F%2Fgithub.com%2FRobinCK%2Fvue-popper?ref=badge_large)
|
199 |
|
200 | MIT © [Igor Ognichenko](https://github.com/RobinCK)
|