st-popup-menu

st-popup-menu is a web component built with Stencil to easily display a popup menu on hover (or click) another element.

Demo

Getting Started

To try this component:

git clone [email protected]:andregoncalves/st-popup-menu.git
cd st-popup-menu
git remote rm origin

and run:

npm install
npm start

Using this component

Script tag

• 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

Node Modules

• 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

In a stencil-starter app

• 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

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.

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

<st-popup-menu target="img1" trigger="hover" delay="200">
  <div>Popup contents here</div>
</st-popup-menu>