Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nullvoxpopuli/ember-popperjs
Renderless Component for Popper.JS for you to easily make popovers in Ember.JS
https://github.com/nullvoxpopuli/ember-popperjs
ember emberjs hacktoberfest popperjs
Last synced: 14 days ago
JSON representation
Renderless Component for Popper.JS for you to easily make popovers in Ember.JS
- Host: GitHub
- URL: https://github.com/nullvoxpopuli/ember-popperjs
- Owner: NullVoxPopuli
- License: mit
- Created: 2021-10-03T13:38:32.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-28T22:44:10.000Z (9 months ago)
- Last Synced: 2024-05-01T23:23:36.190Z (9 months ago)
- Topics: ember, emberjs, hacktoberfest, popperjs
- Language: JavaScript
- Homepage:
- Size: 1.5 MB
- Stars: 24
- Watchers: 4
- Forks: 4
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ember-popperjs
## Deprecation notice
This addon is deprecated. [Popperjs](https://www.npmjs.com/package/@popperjs/core) is on the way out -- deprecated by its owners, in favor of [floating-ui](https://github.com/floating-ui/floating-ui), which is what [ember-velcro](https://github.com/CrowdStrike/ember-velcro) uses. If you're looking for a popover/tooltip addon for EmberJS, you should take a look at [ember-velcro](https://github.com/CrowdStrike/ember-velcro).
---
[](https://badge.fury.io/js/ember-popperjs)
[](https://github.com/NullVoxPopuli/ember-popperjs/actions/workflows/ci.yml)
A single `` component with easy to use API for creating popovers, tooltips, etc.
## Compatibility
* Ember.js v3.25 or above
* Ember CLI v3.25 or above
* Webpack v5 or above
* ember-auto-import v2 or above
## Installation
```
ember install ember-popperjs
```
## Usage
Example building a `` component
```hbs
{{yield to="trigger"}}
{{#if this.yourVisibilityIndicator}}
This is a popover!
{{yield to="default"}}
{{/if}}
```
Things `` does not do:
- provide styles for making a popover
- provide click handlers for showing and hiding the popover
However, this addon pairs nicely with [Tailwind CSS](https://tailwindcss.com/) and [HeadlessUI](https://github.com/GavinJoyce/ember-headlessui)
and a menu popover may look like:
```hbs
{{yield menu to="trigger"}}
{{yield (component 'limber/menu/button' item=items.Item) to="options"}}
```
`` provides the click handlers and visibility controls that make a
popover behave as you would expect.
### API
#### yield parameters
```hbs
...
```
- `reference` - modifier - sets up the target element for the popover element to position itself to
- `popover` - modifier - attaches to the element that is the container of the popover content
#### arguments
##### `@placement`
The default placement is `"bottom-end"`, but any placement described by the
`Placement` options on the [popper.js](https://popper.js.org/docs/v2/constructors/#options) site will work.
For example,
```hbs
...
```
##### `@options`
If the default options don't suit you, you may override them entirely.
These options are not merged with any defaults, but allow straight pass-through, of the [Popper.js Options](https://popper.js.org/docs/v2/constructors/#options) object.
Additionally, some options require references to the `reference` element as well as the `popover` element, so if you need that level of flexibility, `@options` may also be a function with the following signature:
```ts
(reference: HTMLElement, popover: HTMLElement) => Partial;
```
Note that if using `@options`, `@placement` will be ignored.
## Contributing
See the [Contributing](CONTRIBUTING.md) guide for details.
## License
This project is licensed under the [MIT License](LICENSE.md).