st-popup-menu is a web component built with Stencil to easily display a popup menu on hover (or click) another element.
To try this component:
git clone git@github.com:andregoncalves/st-popup-menu.git
cd st-popup-menu
git remote rm origin
and run:
npm install
npm start
- Put
<script src='https://unpkg.com/st-popup-menu@latest/dist/st-popup-menu.js'></script>
in the head of your index.html - Then you can use the component
- Run
npm install st-popup-menu --save
- Put a script tag similar to this
<script src='node_modules/st-popup-menu/dist/st-popup-menu.js></script>
in the head of your index.html - Then you can use the element
<st-popup-menu>
anywhere in your template, JSX, html etc
- Run
npm install st-popup-menu --save
- Add this import to your root component or root module:
import 'st-popup-menu'
; - Then you can use the element
<st-popup-menu>
anywhere in your template, JSX, html etc
- 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
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 |
The st-popup-menu element emits a show
and hide
events whenever the popup is shown or hidden.
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);
});
<st-popup-menu target="img1" trigger="hover" delay="200">
<div>Popup contents here</div>
</st-popup-menu>