jb-popover
v0.0.2
Published
popover web component
Downloads
87
Maintainers
Readme
jb-popover
sometimes you need a to open a small window next to a element to show more detail or more available actions. jb-popover will be doing that for you with some benefits:
- handle overflow if popover could not fit into it's designed place.
- show popover as a small window next to element in desktop and show it as a bottom-sheet in mobile
- handle animations in standard manner with overflow handler
usage
install:
npm i jb-popover
usage:
import 'jb-popover
<jb-popover>
<!-- put your content here -->
<div>my custom content</div>
<jb-popover>
open & close popover
by just calling open
and close
method:
document.querySelector('jb-popover').open();
document.querySelector('jb-popover').close();
set custom style
you can customize jb-popover styles by just set some css variable. here is the variable list:
| css variable name | description | | ------------- | ------------- | | --jb-popover-z-index | z-index of opened popover | | --jb-popover-bg-color | background color of popover content | | --jb-popover-border-radius | border-radius of popover (must be single like 24px and not 24px 24px 24px 24px) |