logo polydile dile-components

dile-menu-overlay

Web Component to implement a menu user interface, displayed in a overlay layer with a smooth show / hide animation.

Install

npm install @dile/dile-menu-overlay

Usage

Import the component.

import '@dile/dile-menu-overlay/dile-menu-overlay';

Use the component.

This component needs a special markup to create the menĂº, defined as slots:

To define this elements, you need to use the slot attribute, like in this code:

<dile-menu-overlay>
  <span slot="trigger">Click to open</span>
  <div slot="content">
    <p>Select one:</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</dile-menu-overlay>

That's all!!

Properties

The component offers several properties to configure the way it works.

Methods

Custom events

Style customization

You can customize the menu box interface by using the CSS custom properties bellow.

Custom propertyDescriptionDefault
--dile-menu-overlay-background-colormenu overlay layer background color#fff
--dile-menu-overlay-colorOverlay text color#303030
--dile-menu-overlay-z-indexmenu overlay layer z-index999
--dile-menu-overlay-widthMenu overlay layer width280px
--dile-menu-overlay-max-widthMenu overlay layer max width300px
--dile-menu-overlay-border-radiusMenu overlay layer border radius5px
--dile-menu-overlay-box-shadowMenu overlay box shadow0 0 20px rgba(102, 102, 102, 0.5)
--dile-menu-overlay-paddingMenu layer padding1px
--dile-menu-overlay-transitionOpen / Close transition conigurationease 0.5s

dile-menu-overlay demos

Default menu overlay

<dile-menu-overlay horizontalAlign="under">
  <span slot="trigger" class="trigger">Open under</span>
  <div slot="content" class="content">
    <p>Select one:</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</dile-menu-overlay>

Vertical align to center and horizontalAlign to left

<div style="display: flex; justify-content: flex-end;">
  <dile-menu-overlay horizontalAlign="left" verticalAlign="center" moveLeft="10">
    <span slot="trigger" class="trigger">Open Left</span>
    <div slot="content" class="content">
      <p>Select one:</p>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </dile-menu-overlay>
</div>

Styled menu

This menu is configured to close the interface when user clicks inside the menu.

<style>
.styled {
  --dile-menu-overlay-color: #69f;
  --dile-menu-overlay-border-radius: 0;
  --dile-menu-overlay-background-color: #303030;
  --dile-menu-overlay-width: 200px;
  --dile-menu-overlay-box-shadow: 2px 2px 16px rgb(77, 22, 77);
  --dile-menu-overlay-transition: ease 1s;
}
</style>
<dile-menu-overlay closeOnClickInside class="styled" verticalAlign="top">
  <span slot="trigger" class="trigger">Click to open styled</span>
  <div slot="content" class="content">
    <p>Select one:</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</dile-menu-overlay>