Add-on Directory

← Back

LitRenderer cookbook

LitRenderer Cookbook

Author

Rating

Popularity

<100

Cookbook with LitRenderer explanations and recipies.

See LitRenderer cookbook

Note: There's no add-on here. Only the above link is relevant.

Background

I wrote this documentation to help others on how to achieve great looking and well-performing icon actions inside Grids. Originally, I thought I would create some Java builders to assist with the most common patterns for LitRenderers. However, it quickly became clear that this would be futile: there are simply too many combinations. In the end it is better for a Vaadin Flow developer to understand how to create LitRenderer html, than it would be to have some Java code that would hide this .. and still wouldn't cover the required use cases.

And before you ask: No, the idea is not to duplicate Vaadin's own documentation. Only to document the things which at the moment cannot be found in the Vaadin documentation nor in Vaadin Cookbook. Eventually I would like to see at least some of this in Vaadin's official documentation or in the Vaadin Cookbook but my style of explanation may not be for everyone.

If you have comments or corrections to the published documentation then please don't hesitate to log an issue on GitHub or put a comment here.

Compatibility

(Loading compatibility data...)

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

Released
2022-10-26
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 23+
Browser
N/A

transburger-icon - Vaadin Add-on Directory

Custom element to display a transformable hamburger icon transburger-icon - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/kcmr/transburger-icon](https://github.com//kcmr/transburger-icon/blob/v3.0.3/README.md) on 2019-05-22 ]** # Transburger Icon [![Build Status](https://img.shields.io/travis/kcmr/transburger-icon/master.svg?style=flat-square)](https://travis-ci.org/kcmr/transburger-icon) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg?style=flat-square)](https://www.webcomponents.org/element/kcmr/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. [![Transburger Icon Demos](https://raw.githubusercontent.com/kcmr/transburger-icon/master/transburger-icon-demos.gif)](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-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](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 ```
Documentation
GitHub Homepage
Issue tracker
Online Demo
View on GitHub

transburger-icon version 1.0.0
### Dependencies Polymer/polymer#^1.4.0

transburger-icon version 1.0.1
### Dependencies Polymer/polymer#^1.4.0

transburger-icon version 1.0.10
### Dependencies * polymer#Polymer/polymer#^1.4.0

transburger-icon version 1.0.11
### Dependencies * polymer#Polymer/polymer#^1.4.0

transburger-icon version 1.0.12
### Dependencies * polymer#Polymer/polymer#^1.4.0

transburger-icon version 1.0.2
### Dependencies Polymer/polymer#^1.4.0

transburger-icon version 1.0.3
### Dependencies Polymer/polymer#^1.4.0

transburger-icon version 1.0.4
### Dependencies Polymer/polymer#^1.4.0

transburger-icon version 1.0.5
### Dependencies Polymer/polymer#^1.4.0

transburger-icon version 1.0.6
### Dependencies * polymer#Polymer/polymer#^1.4.0

transburger-icon version 1.0.7
### Dependencies * polymer#Polymer/polymer#^1.4.0

transburger-icon version 1.0.8
### Dependencies * polymer#Polymer/polymer#^1.4.0

transburger-icon version 1.0.9
### Dependencies * polymer#Polymer/polymer#^1.4.0

transburger-icon version 1.0.13
### Dependencies * polymer#Polymer/polymer#^1.4.0

transburger-icon version 1.0.14
### Dependencies * polymer#Polymer/polymer#^1.4.0

transburger-icon version 1.0.15
### Dependencies * polymer#Polymer/polymer#^1.4.0

transburger-icon version 2.0.0
### Dependencies * polymer#Polymer/polymer#^1.4.0

transburger-icon version 3.0.0
### Dependencies * polymer#Polymer/polymer#^2.0.0

transburger-icon version 3.0.1
### Dependencies * polymer#Polymer/polymer#^2.0.0

transburger-icon version 3.0.2
### Dependencies * polymer#Polymer/polymer#^2.0.0

transburger-icon version 3.0.3
### Dependencies * polymer#Polymer/polymer#^2.0.0

transburger-icon version 3.1.0
### Dependencies * polymer#Polymer/polymer#^2.0.0

transburger-icon version 3.1.1
### Dependencies * polymer#Polymer/polymer#^2.0.0

Online