dile-hamburger

Moved

This package has moved and is now available at @dile/dile-hamburger. Please update your dependencies. This repository is no longer maintained.

<dile-hamburger>

A component to show the tipical hamburger icon menu. Based on LitElement.

Has two states, opended and closed, and a boolean property "active" to define the state. This component do not responds to any user interaction by it self. The parent component has the responsability to change the state when is desired, binding the state to the "active" property, or changing it programaticaly.

The hamburger component use a smooth CSS animation when changes it's state.

Go to DEMOS page.

This webcomponent follows the open-wc recommendation.

Installation

npm i dile-hamburger

Usage

<script type="module">
  import 'dile-hamburger/dile-hamburger.js';
</script> 
 
<dile-hamburger></dile-hamburger>

Properties

• active: Boolean property to set the state of the hamburger icon.

Customization

You can customize the icons using this CSS Custom properties;

Custom property	Description	Default
--dile-hamburger-color	Icon color	#000
--dile-hamburger-active-color	Icon color	#000
--dile-hamburger-line-size	Width of the icon lines	3px
--dile-hamburger-width	Width of the entire icon	24px
--dile-hamburger-height	Height of the entire icon	24px
--dile-hamburger-line-separation	Separation between lines, only in inactive state icon	-6px