https://github.com/javadbat/jb-popover

popover web-component
https://github.com/javadbat/jb-popover

Last synced: 7 days ago
JSON representation

popover web-component

• Host: GitHub
• URL: https://github.com/javadbat/jb-popover
• Owner: javadbat
• License: mit
• Created: 2024-08-03T12:20:14.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-11-12T13:58:57.000Z (about 1 month ago)
• Last Synced: 2024-11-30T13:28:58.067Z (22 days ago)
• Language: TypeScript
• Size: 8.79 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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:

```cmd

npm i jb-popover

```

usage:

```js

import 'jb-popover

```

```html

  

   
my custom content


```

## open & close popover

by just calling `open` and `close` method:

```javascript

document.querySelector('jb-popover').open();

document.querySelector('jb-popover').close();

```

## overflow

we can handle overflow by set 2 `overflowHandler`, `overflowDom` property

```javascript

//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) |