Polymer element to display a Dialogue box for selecting colors

[ This description is mirrored from README.md at github.com/Link2Twenty/l2t-paper-color on 2019-05-10 ]

l2t-paper-color

Dialogue box for selecting colors

gif

Install with bower

First you need bower, see their site for details

bower install --save l2t-paper-color

Examples

  <l2t-paper-color></l2t-paper-color>

Styling

The following custom properties are available for styling:

Custom property Description Default
--l2t-paper-color-width width of input 120px
--l2t-paper-color-indicator-icon style for color indicator (programmatically set) transparent
--l2t-paper-color-indicator-icon-display display style for color indicator (programmatically set) none

Attributes

Public

Attribute Name Functionality Type Default
alwaysFloatLabel always-float-label: boolean label always in float position boolean false
colors array to store list of colors Array false
disabled boolean input diabled Number 5
hideAdvanced boolean to hide advance button boolean false
label string to store hex color value string "Color select"
noLabelFloat boolean remove label when value contains text boolean false
readonly boolean input read only boolean false
value string for value of input string ""

Methods

Private

Method Name Action
_colorUpdate() Updates styles to match value
_createDialog Create dialog on first request
_dialogHandler(e) If dialog is confirmed update value
_openDialog() Open dialog if not readonly

Install

Link to this version
ImportedReleased 24 April 2018MIT License
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
bower install --save Link2Twenty/l2t-paper-color"#1.0.4"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.0.4

Dependencies

  • polymer#Polymer/polymer#^2.0.0
  • paper-radio-group#PolymerElements/paper-radio-group#^2.0.0
  • paper-slider#PolymerElements/paper-slider#^2.0.0
  • paper-behaviors#PolymerElements/paper-behaviors#^2.0.0
  • paper-styles#PolymerElements/paper-styles#^2.0.0
  • iron-flex-layout#PolymerElements/iron-flex-layout#^2.0.0
  • iron-icons#PolymerElements/iron-icons#^2.0.0
  • paper-button#PolymerElements/paper-button#^2.0.0
  • paper-dialog#PolymerElements/paper-dialog#^2.0.0
  • paper-input#PolymerElements/paper-input#^2.0.0