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 [email protected]:andregoncalves/st-popup-menu.git
cd st-popup-menu
git remote rm originand 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>