https://github.com/link2twenty/l2t-paper-color

Polymer element to display a Dialogue box for selecting colors
https://github.com/link2twenty/l2t-paper-color

Last synced: 8 days ago
JSON representation

Polymer element to display a Dialogue box for selecting colors

• Host: GitHub
• URL: https://github.com/link2twenty/l2t-paper-color
• Owner: Link2Twenty
• Created: 2017-05-30T10:00:05.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-05-25T15:38:05.000Z (over 6 years ago)
• Last Synced: 2024-11-11T12:04:41.484Z (9 days ago)
• Language: HTML
• Homepage: https://www.webcomponents.org/element/Link2Twenty/l2t-paper-color
• Size: 45.9 KB
• Stars: 7
• Watchers: 3
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Link2Twenty/l2t-paper-color)

[![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-blue.svg)](https://vaadin.com/directory/component/Link2Twentyl2t-paper-color)

[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/Link2Twentyl2t-paper-color.svg)](https://vaadin.com/directory/component/Link2Twentyl2t-paper-color)

# 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 |