RobinCK / Vue Popper
Licence: mit
🐳 VueJS popover component based popper.js
Stars: ✭ 359
Projects that are alternatives of or similar to Vue Popper
vue-popover
Reusable popover component for Vue
Stars: ✭ 22 (-93.87%)
Mutual labels: popover, vue-component
Quasar
Quasar Framework - Build high-performance VueJS user interfaces in record time
Stars: ✭ 20,090 (+5496.1%)
Mutual labels: vue-component
Vue Search Select
A Vue.js search select component
Stars: ✭ 297 (-17.27%)
Mutual labels: vue-component
Vue A11y Calendar
Accessible, internationalized Vue calendar
Stars: ✭ 255 (-28.97%)
Mutual labels: vue-component
Vue Draggable Nested Tree
Please use the he-tree-vue, vue-draggable-nested-tree will no longer be maintained.
Stars: ✭ 302 (-15.88%)
Mutual labels: vue-component
vui-vc-next
Vue 3 with Vite Playground - Mobile web UI components - (vue3+vite2).
Stars: ✭ 15 (-95.82%)
Mutual labels: vue-component
Cool ui
用flutter实现一些我认为好看的UI控件,有Popover,仿Weui的Toast,自定义键盘
Stars: ✭ 349 (-2.79%)
Mutual labels: popover
Popper Core
🍿 JavaScript positioning library for tooltips, popovers, dropdowns, and more
Stars: ✭ 18,903 (+5165.46%)
Mutual labels: popover
Vue Cute Timeline
A cute timeline component for Vue.js.
Stars: ✭ 289 (-19.5%)
Mutual labels: vue-component
Vue Float Menu
🎈Customizable floating menu for Vue
Stars: ✭ 252 (-29.81%)
Mutual labels: vue-component
Vue Flow Form
Create conversational conditional-logic forms with Vue.js.
Stars: ✭ 315 (-12.26%)
Mutual labels: vue-component
Tooltip Sequence
A simple step by step tooltip helper for any site
Stars: ✭ 287 (-20.06%)
Mutual labels: popover
Ftpopovermenu swift
FTPopOverMenu_Swift, swift version of FTPopOverMenu. FTPopOverMenu is a pop over menu for iOS which is maybe the easiest one to use. Supports both portrait and landscape. It can show from any UIView, any UIBarButtonItem and any CGRect.
Stars: ✭ 326 (-9.19%)
Mutual labels: popover
vue-icon
Maybe it is the smallest vue component that contains all the feather icons
Stars: ✭ 44 (-87.74%)
Mutual labels: vue-component
Vue Tree Chart
A vue2 component to display tree chart
Stars: ✭ 351 (-2.23%)
Mutual labels: vue-component
Iconpark
🍎Transform an SVG icon into multiple themes, and generate React icons,Vue icons,svg icons
Stars: ✭ 4,924 (+1271.59%)
Mutual labels: vue-component
Vue Countup V2
Vue.js component wrap for countUp.js
Stars: ✭ 323 (-10.03%)
Mutual labels: vue-component
vue-popperjs
VueJS popover component based on popper.js
Example
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
npm install vue-popperjs --save
Yarn
yarn add vue-popperjs
Bower
bower install vue-popperjs --save
Development Setup
# install dependencies
npm install
# build dist files
npm run build
Usage
VueJS single file (ECMAScript 2015)
<template>
<popper
trigger="clickToOpen"
:options="{
placement: 'top',
modifiers: { offset: { offset: '0,10px' } }
}">
<div class="popper">
Popper Content
</div>
<button slot="reference">
Reference Element
</button>
</popper>
</template>
<script>
import Popper from 'vue-popperjs';
import 'vue-popperjs/dist/vue-popper.css';
export default {
components: {
'popper': Popper
},
}
</script>
Browser (ES5)
<link rel="stylesheet" href="vue-popper.css">
<script type="text/javascript" src="popper.js"></script>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-popper.js"></script>
<div id="app">
<popper
trigger="clickToOpen"
:options="{
placement: 'top',
modifiers: { offset: { offset: '0,10px' } }
}">
<div class="popper">
Popper Content
</div>
<button slot="reference">
Reference Element
</button>
</popper>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
components: {
'popper': VuePopper
}
});
</script>
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:
|
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 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 | Vue plugin for work with local storage, session storage and memory storage from Vue context | |
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].
Financial Contributors
Become a financial contributor and help us sustain our community. [Contribute]
Individuals
Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]
License
MIT © Igor Ognichenko
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].