UI-related colorboard is a tool to get the hex code of a color that you are going to use for styling. By default, colors are presented in a rainbow-like manner. The detalization level you set manually.
Colorboard is used in conjunction with a colorpicker control. In such a case, you needn't to initialize a colorboard since it will appear as soon as you click a control.
When used separately, colorboard is inited in the following way:
webix.ui({
view:"colorboard",
cols :30,
rows :30,
width :400,
height :400
});
You can customize your colorboard by:
webix.ui({
view:"colorboard",
cols:7,
rows:4,
width:600,
height:370,
template:"<div class=\"value_cell\">" +
"<div>{obj.val}</div>" +
"<div class=\"color_block\" style=\"background:{obj.val};\"></div>" +
"</div>"
});
Related sample: Palette - Templates
var colors = [
["#C6D9F0", "#8DB3E2", "#548DD4"],
["#F2DCDB", "#E5B9B7", "#D99694"],
["#EBF1DD", "#D7E3BC", "#C3D69B"]
];
webix.ui({
view:"colorboard",
...
palette:colors
});
Related sample: Colorboard - Colors
Normally, selected color is derived with the help of the getValue() method:
$$("colorboard1").getValue();
In addition, color values can be logged once val, control and ev parameters are passed into the logging function.
function doLog(val, control, ev){
webix.message(this.config.id + " - " + val);
}