transburger-icon
Custom element to display a transformable hamburger icon
[ This description is mirrored from README.md at github.com/kcmr/transburger-icon on 2019-05-22 ]
Transburger Icon
<transburger-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.
Install
Install the component using Bower:
$ bower install transburger-icon --save
Usage
Import Web Components polyfill:
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
Import Custom Element:
<link rel="import" href="bower_components/transburger-icon/transburger-icon.html">
Use it!:
<transburger-icon></transburger-icon>
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-height | Icon height in pixels. For better results, use multiples of 7 | 14px |
| --transburger-icon-line-radius | Hamburger icon lines radius | 2px |
| --transburger-icon-margin | Vertical and horizontal margins | 0.85714em |
| --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 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.
<transburger-icon aria-label="Menu"></transburger-icon>
You can also provide the aria-controls attribute to specify the element ID that is controlled by the button.
<transburger-icon aria-label="Menu" aria-controls="menu"></transburger-icon>
<div id="menu" role="navigation">…</div>
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- polymer#Polymer/polymer#^2.0.0
- Released
- 2018-06-17
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Polymer 2.0+
- Polymer 1.0+ in 2.0.0
- Browser
- Browser Independent