logo polydile dile-components

dile-hamburger

A component to show the typical hamburger menu icon with an smooth animation between two states, open and closed.

The component states, opended and closed, defines how the icon is displayed. There is a boolean property active to define it's state.

This component do not responds to any user interaction by itself. It is suposed that dile-hamburger will be used inside other componets who should have the responsability to change the state according to their requirements, binding his state to the active property, or changing it programaticaly.

The main hability of this hamburger icon component is his smooth CSS animation when changes it's state.

Installation

npm i @dile/dile-hamburger

Usage

Import the component.

import '@dile/dile-hamburger/dile-hamburger.js';

Use the component.

<dile-hamburger></dile-hamburger>

Properties

Customization

You can customize the icons using this CSS Custom properties;

Custom propertyDescriptionDefault
--dile-hamburger-colorIcon color#000
--dile-hamburger-padding-xHorizontal icon box padding15px
--dile-hamburger-padding-yVertical icon box padding15px
--dile-hamburger-active-colorIcon color#000
--dile-hamburger-line-sizeWidth of the icon lines3px
--dile-hamburger-widthWidth of the entire icon24px
--dile-hamburger-heightHeight of the entire icon24px
--dile-hamburger-line-separationSeparation between lines, only in inactive state icon-6px

dile-hamburger demos

Default hamburger icon

class MyComponent extends LitElement {
  static get styles() {
    return css`
     
    `
  }

  render() {
    return html`
      <dile-hamburger id="icon"></dile-hamburger>
      <button id="toggle">Toggle active</button>
    `
  }
  firstUpdated() {
    this.shadowRoot.getElementById('toggle').addEventListener('click', () => {
      this.shadowRoot.getElementById('icon').active = ! this.shadowRoot.getElementById('icon').active;
    });
  }
}
customElements.define('my-component', MyComponent);
export const JsStory = () => html`<my-component></my-component>`;

styled hamburger icon

class OtherComponent extends LitElement {
  static get styles() {
    return css`
     dile-hamburger {
      --dile-hamburger-color: #4cc;
      --dile-hamburger-active-color: rgb(238, 30, 151);
      --dile-hamburger-line-size: 6px;
      --dile-hamburger-width: 48px;
      --dile-hamburger-height: 36px;
      --dile-hamburger-line-separation: 14px; 
    }
    `
  }

  render() {
    return html`
      <dile-hamburger id="icon"></dile-hamburger>
      <button id="toggle">Toggle active</button>
    `
  }
  firstUpdated() {
    this.shadowRoot.getElementById('toggle').addEventListener('click', () => {
      this.shadowRoot.getElementById('icon').active = ! this.shadowRoot.getElementById('icon').active;
    });
  }
}
customElements.define('other-component', OtherComponent);
export const JsStory2 = () => html`<other-component></other-component>`;