Colorpicker
This is the basic colorpicker view we use, for the actual picking you have to use your own colorpicker component.
Default
<e-colorinput id="example-colorpicker-trigger" value readonly></e-colorinput>
<e-colorpicker id="example-colorpicker" key="example-colorpicker"></e-colorpicker><e-colorinput id="example-colorpicker-trigger" value readonly></e-colorinput>
<e-colorpicker id="example-colorpicker" key="example-colorpicker"></e-colorpicker>JavaScript
var pickerTriggerElement = document.querySelector('#example-colorpicker-trigger');
var pickerElement = document.querySelector('#example-colorpicker');
var lastValue = "";
pickerTriggerElement.addEventListener('click', function(event) {
if (pickerElement.isOpened) {
pickerElement.close();
} else {
pickerElement.open(pickerTriggerElement, pickerTriggerElement.value);
}
});
pickerElement.addEventListener('apply', function(event) {
lastValue = event.detail.value;
pickerTriggerElement.value = event.detail.value;
});
pickerElement.addEventListener('change', function(event) {
pickerTriggerElement.value = event.detail.value;
});
pickerElement.addEventListener('cancel', function(event) {
pickerTriggerElement.value = lastValue;
});
API Reference
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| key | A key for storing the recently used colors. Colorpickers with the same key will share their recent colors. If omitted, recent colors won't be stored. | string | - | |
| isOpened | A getter that reflects whether the colorpicker is opened. | boolean | false |
Method
| Name | Description |
|---|---|
open(referenceElement: HTMLElement, color: string) | Opens the colorpicker. The reference element is used for positioning. Color is a hexadecimal color code (e.g. '#bada55') that will be the initially selected color. |
Events
| Event | Description | Returns |
|---|---|---|
change | Fires when the current color is changed inside the component. The value is a hexadecimal color code with hashmark, e.g. '#bada55'. If the current color is invalid, then value is empty string. | {
detail: {
isValid: [boolean],
value: [hex code with hash],
hex: [hex code without hash],
rgb: {
r: [red value],
g: [green value],
b: [blue value]
}
}
} |
apply | Fires when the selected color is applied. The value is the hexadecimal color code of the selected color with hashmark, e.g. '#bada55'. | {
detail: {
isValid: [boolean],
value: [hex code with hash],
hex: [hex code without hash],
rgb: {
r: [red value],
g: [green value],
b: [blue value]
}
}
} |
cancel | Fires when colorpicker is cancelled. | { detail: null } |