Class

ColorPicker

kiss.ui.ColorPicker(config)

The ColorPicker derives from Component. It allows to pick a color from a pre-defined palette.

Constructor

# new ColorPicker(config)

Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 3 following methods:

Create the Web Component and call its init method:

const myColorPicker = document.createElement("a-colorpicker").init(config)

Or use the shorthand for it:

const myColorPicker = createColorPicker({
  value: "#00aaee", 
  columns: 10,
  action: (iconClass) => console.log(iconClass)
})

myColorPicker.render()

Or directly declare the config inside a container component:

const myPanel = createPanel({
  title: "My panel",
  items: [
      {
          type: "colorPicker",
          value: "#00aaee",
          columns: 10,
          action: (color) => console.log(color)
      }
  ]
})
myPanel.render()
Parameters:
Name Type Attributes Description
config object
value string <optional>

The default hexa color code. Ex: "#00aaee"

palette Array.<string> <optional>

Custom color palette, for example: ["00aaee", "a1ed00", "ffffff", "000000"]

autoFocus function <optional>

Automatically scroll down to the selected color if true (default false)

action function <optional>

Function executed when a color is selected. Receives the selected hexa color code as an argument.

columns Array.<object> <optional>

Number of columns to display the colors

iconSize string <optional>

Size of the icon displayed into the selected color. Ex: "16px"

selectorSize string <optional>

Should be greater than the icon size. Ex: "32px"

selectorBorderRadius string <optional>

Ex: "10px"

background string <optional>
backgroundColor string <optional>
backgroundColorSelected string <optional>
width string | number <optional>
height string | number <optional>
padding string <optional>
margin string <optional>
border string <optional>
borderStyle string <optional>
borderWidth string <optional>
borderColor string <optional>
borderRadius string <optional>
boxShadow string <optional>
record object <optional>

The record to bind the field to. This will automatically update the record when the field value changes, and the field will listen to database changes on the record.

View Source client/ui/fields/colorPicker.js, line 41

this

Generated markup

<a-colorpicker class="a-colorpicker">

 <!-- For each color selector -->
 <span class="color-selector"></span>

</a-colorpicker>

Methods

# clearValue()

Clear the field value

View Source client/ui/fields/colorPicker.js, line 259

this

# focus()

Scroll down to the selected color

View Source client/ui/fields/colorPicker.js, line 349

this

# getValue() → {string}

Get the current selected color

View Source client/ui/fields/colorPicker.js, line 306

Hexa color code. Ex: #00aaee

string

# setHeight(height)

Set the field height

Parameters:
Name Type Description
height *

View Source client/ui/fields/colorPicker.js, line 338

this

# setValue(color, rawUpdateopt)

Set a new color

Parameters:
Name Type Attributes Description
color string

Hexa color code. Ex: #00aaee

rawUpdate boolean <optional>

If true, it doesn't update the associated record and doesn't trigger "change" event

View Source client/ui/fields/colorPicker.js, line 230

this

# setWidth(width)

Set the field width

Parameters:
Name Type Description
width *

View Source client/ui/fields/colorPicker.js, line 326

this

new ColorPicker

Methods