jb-popover
v1.1.0
Published
popover web component
Downloads
303
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();
overflow
we can handle overflow by set 2 ``overflowHandler,
overflowDom` property
//popover will slide soothly up if it overflow the page or any other assigned container
document.querySelector('jb-popover').overflowHandler = "SLIDE";
// popover would check overflow status with window by default if you set overflowDom to any other DOM Element it will check overflow by it for example if ypu use it in a modal you can set it to modal dom. set this property is optional
document.querySelector('jb-popover').overflowDom= document.querySelector('jb-modal');
prevent close on mobile by back button
in some cases you want to prevent popover from closing in mobile. for doing so, just add id attribute to the popover element
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) |