ColorPicker(options)

new ColorPicker(options)

Parameters:
Name Type Description
options object

options for colorpicker component

Properties
Name Type Attributes Default Description
container HTMLDivElement

container element

color string <optional>
'#ffffff'

default selected color

preset Array.<string> <optional>

color preset for palette (use base16 palette if not supplied)

cssPrefix string <optional>
'tui-colorpicker-'

css prefix text for each child elements

detailTxt string <optional>
'Detail'

text for detail button.

usageStatistics boolean <optional>
true

Let us know the hostname. If you don't want to send the hostname, please set to false.

Mixes In:
  • CustomEvents
Example
var colorPicker = tui.colorPicker; // or require('tui-color-picker')

colorPicker.create({
  container: document.getElementById('color-picker')
});

Methods

destroy()

Destroy colorpicker instance.

Example
colorPicker.destroy(); // DOM-element is removed

getColor() → {string}

Get hex color string of current selected color in colorpicker instance.

Returns:
string -

hex string formatted color

Example
colorPicker.setColor('#ffff00');
colorPicker.getColor(); // '#ffff00';

setColor(hexStr)

Set color to colorpicker instance.
The string parameter must be hex color value

Parameters:
Name Type Description
hexStr string

hex formatted color string

Example
colorPicker.setColor('#ffff00');

toggle(isShowopt)

Toggle colorpicker element. set true then reveal colorpicker view.

Parameters:
Name Type Attributes Default Description
isShow boolean <optional>
false

A flag to show

Example
colorPicker.toggle(false); // hide
colorPicker.toggle(); // hide
colorPicker.toggle(true); // show

Events

selectColor

Type:
  • object
Properties:
Name Type Description
color string

selected color (hex string)

origin string

flags for represent the source of event fires.