https://github.com/kcmr/transburger-icon
Custom element to display a transformable hamburger icon
https://github.com/kcmr/transburger-icon
button icon polymer2 web-components
Last synced: about 1 month ago
JSON representation
Custom element to display a transformable hamburger icon
- Host: GitHub
- URL: https://github.com/kcmr/transburger-icon
- Owner: kcmr
- License: mit
- Created: 2016-03-22T10:32:31.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-06-17T08:31:38.000Z (about 7 years ago)
- Last Synced: 2025-04-11T05:17:27.328Z (2 months ago)
- Topics: button, icon, polymer2, web-components
- Language: HTML
- Homepage: http://kcmr.github.io/transburger-icon/
- Size: 1.68 MB
- Stars: 11
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Transburger Icon
[](https://travis-ci.org/kcmr/transburger-icon)
[](https://www.webcomponents.org/element/kcmr/transburger-icon)
[](https://vaadin.com/directory/component/kcmrtransburger-icon)
[](https://vaadin.com/directory/component/kcmrtransburger-icon)
`` is a custom element to display a hamburger icon that is transformed into a back or close icon after clicking on it or programmatically using its `toggleIcon()` method.
[](http://kcmr.github.io/transburger-icon/)
## Install
Install the component using [Bower](http://bower.io/):
```bash
$ bower install transburger-icon --save
```
## Usage
Import Web Components polyfill:
```html
```
Import Custom Element:
```html
```
Use it!:
```html
```
## Attributes
| Attribute | Description | Default |
|:----------|:------------|:--------|
| transform-to | Hamburger icon transformation (close, arrow-left, arrow-right) | close |
| icon-position | Icon position (left, right) | left |
| active | Boolean attribute to display the second icon initially | false |
| no-transform | Boolean attribute to disable the icon transformation on click | false |
| type | type attribute for the internal button | |
| disabled | disabled attribute for the internal button | false |
## Methods
| Method | Description |
|:-------|:------------|
| toggleIcon() | Changes the icon |
## Events
| Event name | Description | Bubbles |
|:-----------|:------------|:---------|
| transburger-icon-changed | Fired when the icon is changed | true |
## Styling
The following custom properties are available for styling.
If you want to scale the icon keeping the default proportions, you only need to set the icon height. You can use a value expressed in pixels or the keyword `inherit` to use the button font size. The icon color is the same as the button text color.
| Custom Property | Description | Default |
| :----------------------------------------------- | :-------------------------------------------------------------------------------------- | :----------------------------------- |
| --transburger-icon-button-background | Button background | #ccc |
| --transburger-icon-button-border | Border applied to the button | 0 |
| --transburger-icon-button-border-radius | border-radius applied to the button | initial |
| --transburger-icon-button-box-shadow | Button box-shadow | none |
| --transburger-icon-button-color | color applied to the button | inherit |
| --transburger-icon-button-cursor | cursor applied to the button | initial |
| --transburger-icon-button-font-family | font-family applied to the button | inherit |
| --transburger-icon-button-font-size | Button font-size | var(--transburger-icon-height, 14px) |
| --transburger-icon-button-margin | Margin applied to the button | 0 |
| --transburger-icon-button-outline | outline applied to the button | initial |
| --transburger-icon-button-overflow | Button overflow | visible |
| --transburger-icon-button-padding | Padding applied to the button | 0 |
| --transburger-icon-button-vertical-align | vertical-align applied to the button | middle |
| --transburger-icon-close-top-bottom-lines-active | Empty mixin applied to top and bottom lines for the close style when the icon is active | |
| --transburger-icon-height | Icon height in pixels. For better results, use multiples of 7 | 14px |
| --transburger-icon-line-radius | Hamburger icon lines radius | 2px |
| --transburger-icon-lines-height | Height of the lines | 2px |
| --transburger-icon-margin | Vertical and horizontal margins | 0.85714em |
| --transburger-icon-top-bottom-lines | Empty mixin applied to top and bottom lines | {} |
| --transburger-icon-width | Icon width | 1.42857em |
## Accessibility
If you are going to use the **button without a text**, it's highly recommended that you use the [`aria-label` attribute](http://rawgit.com/w3c/aria/master/aria/aria.html#aria-label) to provide a descriptive text for the button such as “Menu”, “Toggle menu” or similar that could to be used by Assistive Technologies like screen readers.
```html
```
You can also provide the [`aria-controls` attribute](http://rawgit.com/w3c/aria/master/aria/aria.html#aria-controls) to specify the element ID that is controlled by the button.
```html
…
```