2.0.1 • Published 4 years ago

dile-hamburger v2.0.1

Weekly downloads
6
License
MIT
Repository
github
Last release
4 years ago

Moved

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

\

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 propertyDescriptionDefault
--dile-hamburger-colorIcon color#000
--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