Contact us Create app

Add-on Directory

← Back

Color Picker Field for Flow

A color picker field for Vaadin Flow

Author

Contributors

Rating

Links

Popularity

300+

ColorPickerField component for Vaadin Flow

This addon is a direct successor of the Color Picker Field Flow addon since the actual author Julien Charpenel is not able to support it. Huge thanks to him for developing it!

This is a the Component wrapper implementation of the <color-picker-field> element to use it with Vaadin Flow.

Converted vs. Raw Value

There are two implementations of the color picker:

  • ColorPickerField - Provides the value automatically converted to a java.awt.Color
  • ColorPickerFieldRaw - Provides the value as raw CSS Color String

Compatibility

(Loading compatibility data...)

Last updated: 2019-10-04

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

  • fixed issues related to missing events when values were changed
  • fixed packaging issue

Note

Currently flow-server-compatibility-mode is not supported!

Released
2019-10-04
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 14+
Browser
Firefox
Opera
Safari
Google Chrome
Microsoft Edge

l2t-paper-rating - Vaadin Add-on Directory

Polymer element to display "star" ratings in a paper style l2t-paper-rating - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/Link2Twenty/l2t-paper-rating](https://github.com//Link2Twenty/l2t-paper-rating/blob/v2.0.4/README.md) on 2019-05-22 ]** # \ A polymer element to display "star" ratings in a paper style ## Install with bower First you need bower, [see their site](http://bower.io/) for details ``` bower install --save l2t-paper-rating ``` ## Examples ```html

``` ## A11y/ARIA For screen readers it's helpful to have a label though the traditional label element will not work with custom elements so we'll need to change the [aria-label](https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html) or [aria-labelledby](https://www.w3.org/TR/WCAG20-TECHS/ARIA7.html) properties directly. There are examples of both methods on the [demo page](https://www.webcomponents.org/element/Link2Twenty/l2t-paper-rating/demo/demo/index.html). ## Styling The following custom properties are available for styling: | Custom property | Description | Default | |----------------|-------------|-------------| | --rating-icon-color | The color of the icons | --primary-text-color | | --rating-icon-size | The size of the icon (square) | 28px | | --rating-icon-padding | The size of the padding between icons | 2px | | --rating-ink-color | The color of the ripple on icon tap | --primary-text-color | | --rating-unselected-opacity | The opacity of stars 'non-active' | 0.4 | ## Properties ### Public | Attribute Name | Functionality | Type | Default | |----------------|-------------|-------------|-------------| | icon | the icon to use (iron-icons) | String | star | | rating | numbers of star selected (reflectToAttribute) | Number | 1 | | readonly | can the rate be modified | Boolean | false | | total | maximum number of stars selectable | Number | 5 |
View on GitHub
GitHub Homepage
Issue tracker
Documentation
Online Demo

l2t-paper-rating version 1.0.1
### Dependencies * polymer#Polymer/polymer#^2.0.0

l2t-paper-rating version 1.0.2
### Dependencies * polymer#Polymer/polymer#^2.0.0

l2t-paper-rating version 1.0.3
### Dependencies * polymer#Polymer/polymer#^2.0.0 * paper-icon-button#PolymerElements/paper-icon-button#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0

l2t-paper-rating version 1.0.4
### Dependencies * polymer#Polymer/polymer#^2.0.0 * paper-icon-button#PolymerElements/paper-icon-button#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0

l2t-paper-rating version 1.1.0
### Dependencies * polymer#Polymer/polymer#^2.0.0 * paper-icon-button#PolymerElements/paper-icon-button#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0

l2t-paper-rating version 1.1.1
### Dependencies * polymer#Polymer/polymer#^2.0.0 * paper-icon-button#PolymerElements/paper-icon-button#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0

l2t-paper-rating version 1.1.2
### Dependencies * polymer#Polymer/polymer#^2.0.0 * paper-icon-button#PolymerElements/paper-icon-button#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0

l2t-paper-rating version 1.2.0
### Dependencies * polymer#Polymer/polymer#^2.0.0 * paper-icon-button#PolymerElements/paper-icon-button#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0

l2t-paper-rating version 2.0.0
### Dependencies * polymer#Polymer/polymer#^2.0.0 * paper-icon-button#PolymerElements/paper-icon-button#^2.0.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0

l2t-paper-rating version 2.0.1
### Dependencies * polymer#Polymer/polymer#^2.0.0 * paper-icon-button#PolymerElements/paper-icon-button#^2.0.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0

l2t-paper-rating version 2.0.2
### Dependencies * polymer#Polymer/polymer#^2.0.0 * paper-icon-button#PolymerElements/paper-icon-button#^2.0.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0

l2t-paper-rating version V2.0.3
### Dependencies * polymer#Polymer/polymer#^2.0.0 * paper-icon-button#PolymerElements/paper-icon-button#^2.0.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0

l2t-paper-rating version 2.0.3
### Dependencies * polymer#Polymer/polymer#^2.0.0 * paper-icon-button#PolymerElements/paper-icon-button#^2.0.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0

l2t-paper-rating version 2.0.4
### Dependencies * polymer#Polymer/polymer#^2.0.0 * paper-icon-button#PolymerElements/paper-icon-button#^2.0.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^2.0.0 * iron-icons#PolymerElements/iron-icons#^2.0.0

Online