Color Picker web component <cq-color-picker>
.
cq-colors
attribute can contain a csv list of CSS colors to use
or params.colorMap
can be set to a two dimensional array of colors as follows:
var myColorPicker = document.querySelector("cq-color-picker");
myColorPicker.params.colorMap=[[row 1 of colors],[row 2 of colors],[row 3 of colors],[etc]]
myColorPicker.initialize();
Examples
var myColorPicker = document.querySelector("cq-color-picker");
myColorPicker.params.colorMap = [
[
"#ffffff",
"#e1e1e1",
"#cccccc",
"#b7b7b7",
"#a0a0a5",
"#898989",
"#707070",
"#626262",
"#555555",
"#464646",
"#363636",
"#262626",
"#1d1d1d",
"#000000",
],
];
myColorPicker.initialize();
<cq-color-picker>
<cq-colors></cq-colors>
<cq-overrides>
<template>
<div class="ciq-btn"></div>
</template>
</cq-overrides>
</cq-color-picker>
Methods
-
display(activator)
-
Displays the color picker in proximity to the node passed in
Parameters:
Name Type Description activator
object The object representing what caused picker to display
Properties
Name Type Argument Description node
HTMLElement <optional>
The node near where to display the color picker
overrides
array <optional>
Array of overrides. For each of these, a button will be created that if pressed will pass that override back instead of the color
-
pickColor(color)
-
Parameters:
Name Type Description color
-
setColors(colorMap)
-
Parameters:
Name Type Description colorMap
object Object that holds an array of various color arrays.