Select one:
- Item 1
- Item 2
- Item 3
Web Component to implement a menu user interface, displayed in a overlay layer with a smooth show / hide animation.
npm install @dile/dile-menu-overlay
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!!
The component offers several properties to configure the way it works.
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 |
Select one:
<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>
Select one:
<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>
This menu is configured to close the interface when user clicks inside the menu.
Select one:
<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>