API Reference
Namespaces
Classes
Events
Global
Externals

Namespace: cq-color-picker

WebComponents. cq-color-picker

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.