https://github.com/andregoncalves/st-popup-menu
st-popup-menu is a web component to easily display a popup menu on hover (or click) another element.
https://github.com/andregoncalves/st-popup-menu
jsx popup stencil stenciljs-components webcomponents
Last synced: 10 months ago
JSON representation
st-popup-menu is a web component to easily display a popup menu on hover (or click) another element.
- Host: GitHub
- URL: https://github.com/andregoncalves/st-popup-menu
- Owner: andregoncalves
- License: mit
- Created: 2018-08-15T17:10:31.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-01-01T19:27:15.000Z (over 7 years ago)
- Last Synced: 2025-08-09T16:45:55.760Z (10 months ago)
- Topics: jsx, popup, stencil, stenciljs-components, webcomponents
- Language: TypeScript
- Homepage:
- Size: 74.2 KB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# st-popup-menu
st-popup-menu is a web component built with [Stencil](https://stenciljs.com/) to easily display a popup menu on hover (or click) another element.
## Demo
## Getting Started
To try this component:
```bash
git clone git@github.com:andregoncalves/st-popup-menu.git
cd st-popup-menu
git remote rm origin
```
and run:
```bash
npm install
npm start
```
## Using this component
### Script tag
- Put `` in the head of your index.html
- Then you can use the component
### Node Modules
- Run `npm install st-popup-menu --save`
- Put a script tag similar to this `` anywhere in your template, JSX, html etc
### In a React/Rollup/Webpack app
- Run `npm install st-popup-menu --save`
- Add this import to your root component or root module: `import { defineCustomElements } from 'st-popup-menu';`;
- Call `defineCustomElements(window);` in your js file
## Parameters
Attribute | Default | Description
------------ | ------------- | -------------
target | '' | A DOMString containing one selector to match an element
trigger | 'hover' | The trigger that causes popup to be shown either *hover* or *click*
delay | '500' | The delay (in ms) until the popup is hidden after mouse out.
backgroundColor | 'white' | Popup background color
borderColor | 'black' | Popup border color
borderWidth | '1px' | Popup border width
## Events
The st-popup-menu element emits a `show` and `hide` events whenever the popup is shown or hidden.
```js
element = document.querySelector('st-popup-menu');
element.addEventListener('show', (e) => {
// Reference to popup html node
console.log(e.detail);
});
element.addEventListener('hide', (e) => {
// Reference to popup html node
console.log(e.detail);
});
```
## Example usage
```html
<st-popup-menu target="img1" trigger="hover" delay="200">
<div>Popup contents here</div>
</st-popup-menu>
```