Directory

← Back

l2t-paper-color

Polymer element to display a Dialogue box for selecting colors

Author

Rating

Popularity

<100

[ 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

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

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
Released
2018-04-24
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent

l2t-paper-color - Vaadin Add-on Directory

Polymer element to display a Dialogue box for selecting colors l2t-paper-color - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/Link2Twenty/l2t-paper-color](https://github.com//Link2Twenty/l2t-paper-color/blob/v1.0.4/README.md) on 2019-05-10 ]** # l2t-paper-color Dialogue box for selecting colors ![gif](https://lh3.googleusercontent.com/-PwDk7mMnViE/WTHg2YVFCZI/AAAAAAAAdw4/V8CDBow09tcJMogh3EYGQsMQrMDLxxtkQCL0B/h296/2017-06-02.gif) ## Install with bower First you need bower, [see their site](http://bower.io/) for details ``` bower install --save l2t-paper-color ``` ## Examples ```html ``` ## 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 |
Online