https://github.com/capsidjs/capsid-popper
🎈 popper as capsid module :pill:
https://github.com/capsidjs/capsid-popper
capsid frontend javascript layout popper
Last synced: about 1 year ago
JSON representation
🎈 popper as capsid module :pill:
- Host: GitHub
- URL: https://github.com/capsidjs/capsid-popper
- Owner: capsidjs
- License: mit
- Created: 2018-03-10T15:21:04.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-03-07T11:46:33.000Z (over 6 years ago)
- Last Synced: 2024-04-27T07:44:22.145Z (about 2 years ago)
- Topics: capsid, frontend, javascript, layout, popper
- Language: JavaScript
- Homepage: https://npm.im/capsid-popper
- Size: 197 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# capsid-popper v2.0.0
[](https://circleci.com/gh/capsidjs/capsid-popper)
[](https://codecov.io/gh/capsidjs/capsid-popper)
> [capsid][] component for [popper][]
peer dependency: capsid >= 0.20.2, popper.js ^1.12.9
# Install
npm install --save capsid-popper capsid popper.js
# Usage
Install the module to capsid:
```js
capsid.install(require('capsid-popper'))
```
Then place `popper` component:
```html
...
```
This element works as a popper to the reference element with the given placement.
See [popper document][popper] for available placements.
# Options
Some install options are available.
```js
capsid.install(require('capsid-popper'), { name: 'name-of-popper-component' })
```
`name` property specifies the name of the component. Default `popper`. For example, if you pass `{ name: 'my-popper' }`, your popper component should be `
`.
# Events
## `popper-update`
Dispatching `popper-update` event on `popper` components causes the update of the position calculation:
```
document.querySelectorAll('.popper').forEach(el => {
el.dispatchEvent(new CustomEvent('popper-update'))
})
```
The above example updates all the popper components' layouts.
This is useful when you want to change the ref, the placement, or any other configuration of the component.
# History
- 2019-04-04 v2.0.0 Add `data-popper-modifiers`. Remove `data-popper-prevent-overflow` and `data-popper-flip`.
- 2019-04-04 v1.6.0 Add `data-popper-flip`.
- 2019-04-04 v1.5.0 Add `data-popper-prevent-overflow`.
# License
MIT
[capsid]: https://capsid.js.org
[popper]: https://popper.js.org