Colorboard

API Reference

Overview

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.



Initialization

Colorboard is used in conjunction with the ColorPicker control. In such a case, you needn't initialize a colorboard, since it will appear as soon as you click the control.

When used separately, colorboard is initialized in the following way:

webix.ui({
    view: "colorboard",
    cols: 30,
    rows: 30,
    width: 400,
    height: 400
});

Related sample:  Colorboard

Comments:

  • width and height denote the dimensions of a square with a color palette;
  • cols and rows denote the number of colors in each axle - the bigger it is, the more detailed is the palette;
  • gradient nature of the colorboard can be controlled via lightness values:
    • minLightness (0.15 by default) - start value of lightness (the darkest part);
    • maxLightness - (1 by default) - end value of lightness (the lightest part).

Working with Colorboard

You can customize your colorboard by:

  • setting the way of color presentation

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

  • defining your own color set

var colors = [
    ["#C6D9F0", "#8DB3E2", "#548DD4"],
    ["#F2DCDB", "#E5B9B7", "#D99694"],
    ["#EBF1DD", "#D7E3BC", "#C3D69B"]
];
 
webix.ui({
    view:"colorboard",
    ...
    palette:colors
});

Related sample:  Colorboard - Colors

Deriving Selected Color Value from the colorboard:

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);
}

Related Articles

Back to top