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/ui/components/menu-overlay/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 property Description Default
--dile-menu-overlay-background-color menu overlay layer background color #fff
--dile-menu-overlay-color Overlay text color #303030
--dile-menu-overlay-z-index menu overlay layer z-index 999
--dile-menu-overlay-width Menu overlay layer width 280px
--dile-menu-overlay-max-width Menu overlay layer max width 300px
--dile-menu-overlay-border-radius Menu overlay layer border radius 5px
--dile-menu-overlay-box-shadow Menu overlay box shadow 0 0 20px rgba(102, 102, 102, 0.5)
--dile-menu-overlay-padding Menu layer padding 1px
--dile-menu-overlay-transition Open / Close transition coniguration ease 0.5s

dile-menu-overlay demos

Default menu overlay

Open under

Select one:

  • Item 1
  • Item 2
  • Item 3
<style>
  dile-menu-overlay .content {
    background-color: #f5f5f5;
    color: #303030;
    padding: 1rem;
  }
  .trigger {
    cursor: pointer;
  }
</style>
<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

Open Left

Select one:

  • Item 1
  • Item 2
  • Item 3
<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.

Click to open styled

Select one:

  • Item 1
  • Item 2
  • Item 3
<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;
}
dile-menu-overlay .content2 {
    background-color: #303030;
    color: #fff;
    padding: 1rem;
  }
</style>
<dile-menu-overlay closeOnClickInside class="styled" verticalAlign="top">
  <span slot="trigger" class="trigger">Click to open styled</span>
  <div slot="content" class="content2">
    <p>Select one:</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</dile-menu-overlay>