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:

$('cq-color-picker')[0].params.colorMap=[[row 1 of colors],[row 2 of colors],[row 3 of colors],[etc]]
$('cq-color-picker')[0].initialize(); 

Examples

$("cq-color-picker")[0].params.colorMap = [
	[
		"#ffffff",
		"#e1e1e1",
		"#cccccc",
		"#b7b7b7",
		"#a0a0a5",
		"#898989",
		"#707070",
		"#626262",
		"#555555",
		"#464646",
		"#363636",
		"#262626",
		"#1d1d1d",
		"#000000"
	]
];
$("cq-color-picker")[0].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.