Color Picker
+The "Color Picker" component is a simple component to, guess what, allow your users to "pick colors" 😉
+It is fully configurable in terms of colors, you could define the set of colors you rather like to offer and it also implements a "more" action which, if clicked, will open the platform standard color picker.
+Table of contents
+-
+
- Showcase +
- Installation + +
- Usage
-
+
- Slots +
- Attributes +
- Theming +
- Methods +
+ - Trying it out +
Showcase
+Installation
+This component could be added to your web application using the following methods.
+Using from a CDN
+It's recommended to use unpkg to use the DeckDeckGo lazy image component from a CDN. To do so, add the following include script in the main HTML file of your project:
+<script type="module" src="https://unpkg.com/@deckdeckgo/color@latest/dist/deckdeckgo-color/deckdeckgo-color.esm.js"></script>{'\n'}<script nomodule="" src="https://unpkg.com/@deckdeckgo/color@latest/dist/deckdeckgo-color/deckdeckgo-color.js"></script>
+ Install from NPM
+Install it in your project from npm using the following command:
+npm install @deckdeckgo/color
+ Framework integration
+The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.
+That being said, commonly, you might either import or load it:
Import
+import '@deckdeckgo/color';
+ Loader
+import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/color/dist/loader';{'\n'}deckDeckGoElement(window);
+ Usage
+The "Color Picker" Web Component could be integrated using the tag <deckgo-color/>.
<deckgo-color>{'\n'} <span slot="more">...</span>{'\n'}</deckgo-color>
+ Slots
+The slot more is optional, moreover, the "more" action itself could be turned off.
Attributes
+This component offers the following options which could be set using attributes:
+| Property | +Attribute | +Description | +Type | +Default | +
|---|---|---|---|---|
colorHex |
+color-hex |
+The current selected color provided as hexadecimal value. | +string |
+undefined |
+
more |
+more |
+In case you would not like to offer the "more" options. | +boolean |
+true |
+
moreAlt |
+more-alt |
+An accessibility label for the "more action. | +string |
+'More' |
+
palette |
++ | The palette of color (see here under). | +DeckdeckgoPalette[] |
+DEFAULT_PALETTE |
+
Palette
+The palette attribute is a complex object and therefore could only be set using Javascript.
It is defined as the following:
+export interface DeckdeckgoPaletteColor {{'\n'} hex: string;{'\n'} rgb?: string;{'\n'}}{'\n'}{'\n'}export interface DeckdeckgoPalette {{'\n'} color: DeckdeckgoPaletteColor;{'\n'} alt?: string;{'\n'}}
+ The key value is the color provided as hex value. The rgb value is use for presentation purpose, for the hover action and the highlight of the selected color.
The default palette is the following:
+export const DEFAULT_PALETTE: DeckdeckgoPalette[] = [{'\n'} {{'\n'} color: {{'\n'} hex: '#FF6900',{'\n'} rgb: '255,105,0'{'\n'} },{'\n'} alt: 'Orange'{'\n'} },{'\n'} {{'\n'} color: {{'\n'} hex: '#FCB900',{'\n'} rgb: '252,185,0'{'\n'} },{'\n'} alt: 'Yellow'{'\n'} },{'\n'} {{'\n'} color: {{'\n'} hex: '#7BDCB5',{'\n'} rgb: '123,220,181'{'\n'} },{'\n'} alt: 'Light green'{'\n'} },{'\n'} {{'\n'} color: {{'\n'} hex: '#00D084',{'\n'} rgb: '0,208,132'{'\n'} },{'\n'} alt: 'Green'{'\n'} },{'\n'} {{'\n'} color: {{'\n'} hex: '#8ED1FC',{'\n'} rgb: '142,209,252'{'\n'} },{'\n'} alt: 'Light blue'{'\n'} },{'\n'} {{'\n'} color: {{'\n'} hex: '#0693E3',{'\n'} rgb: '6,147,227'{'\n'} },{'\n'} alt: 'Blue'{'\n'} },{'\n'} {{'\n'} color: {{'\n'} hex: '#ABB8C3',{'\n'} rgb: '171,184,195'{'\n'} },{'\n'} alt: 'Grey'{'\n'} },{'\n'} {{'\n'} color: {{'\n'} hex: '#EB144C',{'\n'} rgb: '235,20,76'{'\n'} },{'\n'} alt: 'Red'{'\n'} },{'\n'} {{'\n'} color: {{'\n'} hex: '#F78DA7',{'\n'} rgb: '247,141,167'{'\n'} },{'\n'} alt: 'Pink'{'\n'} },{'\n'} {{'\n'} color: {{'\n'} hex: '#9900EF',{'\n'} rgb: '153,0,239'{'\n'} },{'\n'} alt: 'Violet'{'\n'} },{'\n'} {{'\n'} color: {{'\n'} hex: '#000000',{'\n'} rgb: '0,0,0'{'\n'} },{'\n'} alt: 'Black'{'\n'} }{'\n'}];
+ Theming
+The following theming options will affect this component if set on its host or parent.
+| CSS4 variable | +Default | +Note | +
|---|---|---|
| --deckgo-button-width | +28px | +The width of a button to select a color and the more button | +
| --deckgo-button-height | +28px | +The height of a button to select a color and the more button | +
| --deckgo-button-margin | +4px | +The margin of a button to select a color and the more button | +
| --deckgo-button-outline | +none | +The outline of a button to select a color and the more button | +
| --deckgo-button-border | +none | +The border of a button to select a color and the more button | +
| --deckgo-button-border-radius | +50% | +The border radius of a button to select a color | +
| --deckgo-button-more-border-radius | ++ | The border radius of the more button | +
| --deckgo-button-more-border | ++ | The border of the more button | +
Events
+To listen to the selected color you have to subscribe to the following event:
+| Event | +Description | +Type | +
|---|---|---|
colorChange |
+Emit the selected color. | +CustomEvent<DeckdeckgoPaletteColor> |
+
In case the platform color picker would be use by the user, the change will be triggered multiple times, as long as the user change its value in the platform picker.
+For the definition of the type of the event, see above description of DeckdeckgoPaletteColor.