logo polydile dile-components

DileOverlay

Mixin to create overlay elements. It has the functionality to position custom elements in various ways, and open or close the elements with a smooth animation.

Requirements

This mixin need two elements in the web component to make its work:

Both elements should be in the shadow DOM of the custom element and need to have this ids:

Also is necessary to asign some styles to the overlay element:

#overlay {
  display: none;
  position: absolute;
  opacity: 0;
}

Usually you may also prefer to asign some additional styles, to make a transition between hide / show states:

#overlay {
  display: none;
  position: absolute;
  opacity: 0;
  transition: ease 0.5s;
  transition-property: transform, opacity;
  transform: translateY(-10px);
}

To create the smooth animation there is also necessary to create a "opened" CSS class, to asing styles to the open state of the overlay layer.

#overlay.opened {
  opacity: 1;
  transform: translateY(0);
}

Of course, you can customize your own styles to create your preferred animations.

Installation

npm install @dile/ui

Usage

Use the mixin

import { LitElement, html, css } from 'lit';
import { DileOverlay } from '@dile/ui/mixins/overlay';

class NewComponent  extends DileOverlay(LitElement) {

}

Properties

The mixin offers several properties to customize the the way it shows the overlay.

Overlay state

This mixin also includes a "state" property called "_overlayClass". In order to have the opened/closed state in the overlay layer you should assign the property into the class attribute.

<div id="overlay" class="${this._overlayClass}">
  I am the overlay layer
</div>

Methods

Important note: the trigger does not opens the menu by itself. You must call the open() or toggle() method to open the menu when you need. The trigger by default is used only for positioning the menu overlay.

For example, you can use the the toogle() method as a click handler on the trigger.

<span id="trigger" @click=${this.toggle}>This is the trigger</span>

Custom events

Implementations of DileOverlayMixin

There are some components that implements DileOverlayMixin.