Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/juicy/juicy-popover
Custom Element that expands an area when clicked on a handle
https://github.com/juicy/juicy-popover
plain-js used-in-starcounter-app
Last synced: about 1 month ago
JSON representation
Custom Element that expands an area when clicked on a handle
- Host: GitHub
- URL: https://github.com/juicy/juicy-popover
- Owner: Juicy
- License: mit
- Created: 2014-05-16T09:26:26.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-07-11T06:54:56.000Z (over 1 year ago)
- Last Synced: 2024-09-26T21:22:27.984Z (about 2 months ago)
- Topics: plain-js, used-in-starcounter-app
- Language: HTML
- Homepage: http://juicy.github.io/juicy-popover
- Size: 6.44 MB
- Stars: 5
- Watchers: 11
- Forks: 3
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# <juicy-popover>
`` is a (vanilla) Custom Element that expands an area when clicked on a handle.
It is flexible enough to be used to create dropdowns, combo boxes, tooltips, etc.
## Demo
[Check it live!](http://juicy.github.io/juicy-popover)
## Usage
1. Install the component using [Bower](http://bower.io/):
```sh
$ bower install juicy-popover --save
```
2. Import Web Components' polyfill (optional, allows to run it in old browsers):
```html
```
3. Import Custom Element:
```html
```
4. Start using it!
```html
▼
You only see me when the button is pressed
```
## Attributes
Attribute | Type | Default | Description
--- | --- | --- | ---
`position` | *String* | `bottom left, bottom beforeright, beforetop left, beforetop beforeright` | Position of the expandable after the handler is pressed. If multiple positions are provided (separated by comma), the first position that fits within the viewport will be used.
`disabled` | *Bool* | `false` | If true, element won't expand. If already expanded, it will collapse once set to true. Synchronised with property `disabled`
`expanded` | *Bool* | `false` | Determines whether it's expanded. Synchronised with property `expanded` and event `expanded-changed`
`expand-on` | *String* | `click` | If the value is `click` element will be expanded by clicking on it. If It's `hover` it will expand on mouse hovering it and collapse on moving mouse out.
## Positions
Positon | Description
--- | ---
`top` | Position the top of the expandable at the top of the handler
`beforetop` | Position the bottom of the expandable at the top of the handler
`bottom` | Position the top of the expandable at the bottom of the handler
`beforebotom` | Position the bottom of the expandable at the bottom of the handler
`left` | Position the left of the expandable at the left of the handler
`beforeleft` | Position the right of the expandable at the left of the handler
`right` | Position the left of the expandable at the right of the handler
`beforeright` | Position the right of the expandable at the right of the handler
`middle` | Position the middle of the expandable at the center of the handler
## Slots
Name | Description
--- | ---
`handle` | Slot to set on the handle child node in `` light DOM
`expandable` | Slot to set on the expandable child node in `` light DOM
## Methods
Name | Param name | Type | Description
--- | --- | --- | ---
`expand` | | | Expand the expandable
`collapse` | | | Collapse the expandable
`reposition` | | | Repositions popover
## Custom property
Name | Type | Default | Description
--- | --- | --- | ---
`--popover-z-index` | *Number* | `999` | The `z-index` value of the expandable item
## [Contributing and Development](CONTRIBUTING.md)
## License
MIT