ejColorPicker
8 Mar 201824 minutes to read
The ColorPicker control provides you a rich visual interface for color selection. You can select the color from the professionally designed palettes or custom color. By clicking a point on the color, you can change the active color to the color that is located under the pointer.
Syntax
export class AppComponent {
constructor(){
}
}
Name | Type | Description |
---|---|---|
options | object | settings for color picker |
Example
<input id="colorPicker" ej-colorpicker [value]="#278787" />
Requires
-
module:jQuery
-
module:ej.core.js
-
module:ej.colorpicker.js
-
module:ej.button.js
-
module:ej.splitbutton.js
-
module:ej.menu.js
-
module:ej.slider.js
NOTE
jQuery.easing external dependency has been removed from version 14.3.0.49 onwards. Kindly include this jQuery.easing dependency for versions lesser than 14.3.0.49 in order to support animation effects.
Members
buttonText object
The ColorPicker control allows to define the customized text to displayed in button elements. Using the property to achieve the customized culture values.
Default Value
- { apply: “Apply”, cancel: “Cancel”, swatches: “Swatches” }
Example
<input id="colorPicker" ej-colorpicker [value]="value" [buttonText]="buttonText"/>
export class AppComponent {
value: string;
buttonText:Object;
constructor(){
this.value ="#278787";
this.buttonText={apply: "Set", cancel: "Close"};
}
}
buttonText.apply string
Sets the text for the apply button.
Example
<input id="colorPicker" ej-colorpicker [value]="value" [buttonText]="buttonText"/>
export class AppComponent {
value: string;
buttonText:Object;
constructor(){
this.value ="#278787";
this.buttonText={apply: "select"};
}
}
buttonText.cancel string
Sets the text for the cancel button.
Example
<input id="colorPicker" ej-colorpicker [value]="value" [buttonText]="buttonText"/>
export class AppComponent {
value: string;
buttonText:Object;
constructor(){
this.value ="#278787";
this.buttonText={cancel: "Exit" };
}
}
buttonText.swatches string
Sets the header text for the swatches area.
Example
<input id="colorPicker" ej-colorpicker [value]="value" [buttonText]="buttonText"/>
export class AppComponent {
value: string;
buttonText:Object;
constructor(){
this.value ="#278787";
this.buttonText={swatches: "colors"};
}
}
buttonMode enum|string
Allows to change the mode of the button. Please refer below to know available button mode
Name | Description |
---|---|
Split | Displays the button in split mode |
Dropdown | Displays the button in Dropdown mode |
Default Value
- ej.ButtonMode.Split
Example
<input id="colorPicker" ej-colorpicker [value]="value" [buttonMode]="buttonMode"/>
export class AppComponent {
value: string;
buttonMode:string;
constructor(){
this.value ="#278787";
this.buttonMode="dropdown";
}
}
columns number|string
Specifies the number of columns to be displayed color palette model.
Default Value
- 10
Example
<input id="colorPicker" ej-colorpicker [value]="value" [columns]="columns" [modelType]="modelType"/>
export class AppComponent {
value: string;
modelType:string;
columns:number;
constructor(){
this.value ="#278787";
this.columns=5;
this.modelType="palette";
}
}
cssClass string
This property allows you to customize its appearance using user-defined CSS and custom skin options such as colors and backgrounds.
Default Value
- ””
Example
<input id="colorPicker" ej-colorpicker [value]="value" [cssClass]="cssClass"/>
export class AppComponent {
value: string;
cssClass:string;
constructor(){
this.value ="#278787";
this.cssClass="gradient-lime";
}
}
custom array
This property allows to define the custom colors in the palette model.Custom palettes are created by passing a comma delimited string of HEX values or an array of colors.
Default Value
- empty
Example
<input id="colorPicker" ej-colorpicker [value]="value" [modelType]="modelType" [palette]="palette" [custom]="custom"/>
export class AppComponent {
value: string;
cssClass:string;
palette:string;
custom:string[];
constructor(){
this.value ="#278787";
this.modelType="palette";
this.palette="palette";
this.custom= ["ffffff", "ffccff", "ff99ff", "ff66ff", "ff33ff", "ff00ff", "ccffff", "ccccff"];
}
}
displayInline boolean
This property allows to embed the popup in the order of DOM element flow . When we set the value as true, the color picker popup is always in visible state.
Default Value
- false
Example
<input id="colorPicker" ej-colorpicker [value]="value" [displayInline]="displayInline"/>
export class AppComponent {
value: string;
displayInline:boolean;
constructor(){
this.value ="#278787";
this.displayInline="true";
}
}
enabled boolean
This property allows to change the control in enabled or disabled state.
Default Value
- true
Example
<input id="colorPicker" ej-colorpicker [value]="value" [enabled]="enabled"/>
export class AppComponent {
value: string;
enabled:boolean;
constructor(){
this.value ="#278787";
this.enabled="true";
}
}
enableOpacity boolean
This property allows to enable or disable the opacity slider in the color picker control
Default Value
- true
Example
<input id="colorPicker" ej-colorpicker [value]="value" [enableOpacity]="enableOpacity"/>
export class AppComponent {
value: string;
enableOpacity:boolean;
constructor(){
this.value ="#278787";
this.enableOpacity="true";
}
}
htmlAttributes object
It allows to define the characteristics of the ColorPicker control. It will helps to extend the capability of an HTML element.
Default Value
- {}
Example
<input id="colorPicker" ej-colorpicker [value]="value" [htmlAttributes]="htmlAttributes"/>
export class AppComponent {
value: string;
htmlAttributes:Object;
constructor(){
this.value ="#278787";
this.htmlAttributes={disabled:"disabled"};
}
}
locale string
Defines the localized text values in button and tooltip.
Default Value
- “en-US”
Example
<input id="colorPicker" ej-colorpicker [value]="value" [locale]="locale"/>
export class AppComponent {
value: string;
locale:string;
constructor(){
this.value ="#278787";
this.locale="zh-CN";
}
}
ej.ColorPicker.Locale["zh-CN"] = {
buttonText: {
apply: "应用",
cancel: "取消",
swatches: "色板"
},
tooltipText: {
switcher: "切换器",
addbutton: "添加颜色",
basic: "基本",
monochrome: "单色铬",
flatcolors: "平的颜色",
seawolf: "海狼",
webcolors: "网颜色",
sandy: "沙",
pinkshades: "桃红色树荫",
misty: "蒙蒙",
citrus: "柑橘",
vintage: "葡萄酒",
moonlight: "月光",
candycrush: "糖果粉碎",
currentcolor: "当前颜色",
selectedcolor: "所选颜色"
}
};
modelType enum|string
Specifies the model type to be rendered initially in the color picker control. See below to get available ModelType
Name | Description |
---|---|
Palette | support palette type mode in color picker. |
Picker | support palette type mode in color picker. |
Default Value
- ej.ColorPicker.ModelType.Default
Example
<input id="colorPicker" ej-colorpicker [value]="value" [modelType]="modelType"/>
export class AppComponent {
value: string;
modelType:string;
constructor(){
this.value ="#278787";
this.modelType="palette";
}
}
opacityValue number|string
This property allows to change the opacity value .The selected color opacity will be adjusted by using this opacity value.
Default Value
- 100
Example
<input id="colorPicker" ej-colorpicker [value]="value" [opacityValue]="opacityValue"/>
export class AppComponent {
value: string;
opacityValue:number;
constructor(){
this.value ="#278787";
this.opacityValue=20;
}
}
palette enum|string
Specifies the palette type to be displayed at initial time in palette model.There two types of palette model available in ColorPicker control. See below available Palette
Name | Description |
---|---|
BasicPalette | used to show the basic palette |
CustomPalette | used to show the custom palette |
Default Value
- ej.ColorPicker.Palette.BasicPalette
Example
<input id="colorPicker" ej-colorpicker [value]="value" [modelType]="modelType" [palette]="palette"/>
export class AppComponent {
value: string;
modelType:string;
palette:string;
constructor(){
this.value ="#278787";
this.modelType="palette";
this.palette="basicpalette";
}
}
presetType enum|string
This property allows to define the preset model to be rendered initially in palette type.It consists of 12 different types of presets. Each presets have 50 colors. See below available Presets
Name | Description |
---|---|
Basic | used to show the basic presets |
CandyCrush | used to show the CandyCrush colors presets |
Citrus | used to show the Citrus colors presets |
FlatColors | used to show the FlatColors presets |
Misty | used to show the Misty presets |
MoonLight | used to show the MoonLight presets |
PinkShades | used to show the PinkShades presets |
Sandy | used to show the Sandy presets |
SeaWolf | used to show the Seawolf presets |
Vintage | used to show the Vintage presets |
WebColors | used to show the WebColors presets |
Default Value
- ej.ColorPicker.Presets.Basic
Example
<input id="colorPicker" ej-colorpicker [value]="value" [modelType]="modelType" [presetType]="presetType"/>
export class AppComponent {
value: string;
modelType:string;
presetType:string;
constructor(){
this.value ="#278787";
this.modelType="palette";
this.presetType="vintage";
}
}
showApplyCancel boolean
Allows to show/hides the apply and cancel buttons in ColorPicker control
Default Value
- true
Example
<input id="colorPicker" ej-colorpicker [value]="value" [showApplyCancel]="showApplyCancel"/>
export class AppComponent {
value: string;
showApplyCancel:boolean;
constructor(){
this.value ="#278787";
this.showApplyCancel=true;
}
}
showClearButton boolean
Allows to show/hides the clear button in ColorPicker control
Default Value
- true
Example
<input id="colorPicker" ej-colorpicker [value]="value" [showClearButton]="showClearButton"/>
export class AppComponent {
value: string;
showClearButton:boolean;
constructor(){
this.value ="#278787";
this.showClearButton=true;
}
}
showPreview boolean
This property allows to provides live preview support for current cursor selection color and selected color.
Default Value
- true
Example
<input id="colorPicker" ej-colorpicker [value]="value" [showPreview]="showPreview"/>
export class AppComponent {
value: string;
showPreview:boolean;
constructor(){
this.value ="#278787";
this.showPreview=false;
}
}
showRecentColors boolean
This property allows to store the color values in custom list.The ColorPicker will keep up to 11 colors in a custom list.By clicking the add button, the selected color from picker or palette will get added in the recent color list.
Default Value
- false
Example
<input id="colorPicker" ej-colorpicker [value]="value" [showRecentColors]="showRecentColors"/>
export class AppComponent {
value: string;
showRecentColors:boolean;
constructor(){
this.value ="#278787";
this.showRecentColors= true;
}
}
showSwitcher boolean
Allows to show/hides the switcher button in ColorPicker control.It helps to switch palette or picker mode in color picker.
Default Value
- true
Example
<input id="colorPicker" ej-colorpicker [value]="value" [showSwitcher]="showSwitcher"/>
export class AppComponent {
value: string;
showSwitcher:boolean;
constructor(){
this.value ="#278787";
this.showSwitcher= false;
}
}
showTooltip boolean
This property allows to shows tooltip to notify the slider value in color picker control.
Default Value
- false
Example
<input id="colorPicker" ej-colorpicker [value]="value" [showTooltip]="showTooltip"/>
export class AppComponent {
value: string;
showTooltip:boolean;
constructor(){
this.value ="#278787";
this.showTooltip= true;
}
}
toolIcon string
Specifies the toolIcon to be displayed in dropdown control color area.
Default Value
- null
Example
<input id="colorPicker" ej-colorpicker [value]="value" [toolIcon]="toolIcon"/>
<style>
.e-colorwidget .e-tool .e-fontcolor-icon:before
{
content: "\e632";
margin-top: 9px;
font-size: 10px;
margin-left: 5px;
}
</style>
export class AppComponent {
value: string;
toolIcon:string;
constructor(){
this.value ="#278787";
this.toolIcon= "e-fontcolor-icon";
}
}
tooltipText object
This property allows to define the customized text or content to displayed when mouse over the following elements. This property also allows to use the culture values.
Default Value
- { switcher: “Switcher”, addbutton: “Add Color”, basic: “Basic”, monochrome: “Mono Chrome”, flatcolors: “Flat Color”, seawolf: “Sea Wolf”, webcolors: “Web Colors”, sandy: “Sandy”, pinkshades: “Pink Shades”, misty: “Misty”, citrus: “Citrus”, vintage: “Vintage”, moonlight: “Moon Light”, candycrush: “Candy Crush”, currentcolor: “Current Color”, selectedcolor: “Selected Color” }
tooltipText.switcher string
Sets the tooltip text for the switcher button.
tooltipText.addbutton string
Sets the tooltip text for the add button.
tooltipText.basic string
Sets the tooltip text for the basic preset.
tooltipText.monochrome string
Sets the tooltip text for the mono chrome preset.
tooltipText.flatcolors string
Sets the tooltip text for the flat colors preset.
tooltipText.seawolf string
Sets the tooltip text for the sea wolf preset.
tooltipText.webcolors string
Sets the tooltip text for the web colors preset.
tooltipText.sandy string
Sets the tooltip text for the sandy preset.
tooltipText.pinkshades string
Sets the tooltip text for the pink shades preset.
tooltipText.misty string
Sets the tooltip text for the misty preset.
tooltipText.citrus string
Sets the tooltip text for the citrus preset.
tooltipText.vintage string
Sets the tooltip text for the vintage preset.
tooltipText.moonlight string
Sets the tooltip text for the moon light preset.
tooltipText.candycrush string
Sets the tooltip text for the candy crush preset.
tooltipText.currentcolor string
Sets the tooltip text for the current color area.
tooltipText.selectedcolor string
Sets the tooltip text for the selected color area.
Example
<input id="colorPicker" ej-colorpicker [value]="value" [tooltipText]="tooltipText"/>
export class AppComponent {
value: string;
tooltipText: Object;
constructor(){
this.value ="#278787";
this.tooltipText= { switcher: "Switch", currentcolor: "New Color", selectedcolor: "Old Color" };
}
}
value string
Specifies the color value for color picker control, the value is in hexadecimal form with prefix of “#”.
Default Value
- null
Example
<input id="colorPicker" ej-colorpicker [value]="value"/>
export class AppComponent {
value: string;
tooltipText: Object;
constructor(){
this.value ="#278787";
}
}
Methods
disable()
Disables the color picker control
Example
<input id="colorPicker" ej-colorpicker [value]="value"/>
$('#colorPicker').ejColorPicker({ value: "#278787" });
// Create ColorPicker instance
var colorObj = $("#colorPicker").data("ejColorPicker");
colorObj.disable();
// disables the colorPicker
enable()
Enable the color picker control
Example
<input id="colorPicker" ej-colorpicker [value]="value"/>
$('#colorPicker').ejColorPicker({ value: "#278787" });
// Create ColorPicker instance
var colorObj = $("#colorPicker").data("ejColorPicker");
colorObj.enable(); // disables the colorPicker
getColor()
Gets the selected color in RGB format
####Returns
object
Example
<input id="colorPicker" ej-colorpicker [value]="value"/>
$('#colorPicker').ejColorPicker({ value: "#278787" });
// Create ColorPicker instance
var colorObj = $("#colorPicker").data("ejColorPicker");
var color=colorObj.getColor();
// gets the selected color in RGB format
alert("Red="+color.r+", Green="+color.g+", Blue="+color.b);
getValue()
Gets the selected color value as string
####Returns
string
Example
<input id="colorPicker" ej-colorpicker [value]="value"/>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// Create ColorPicker instance
var colorObj = $("#colorPicker").data("ejColorPicker");
alert(colorObj.getValue()); // gets the selected color value as string
hexCodeToRGB(colorCode)
To Convert color value from hexCode to RGB
####Returns
object
Name | Type | Description |
---|---|---|
colorCode | string | Specified HEX code converted to RGB |
Example
<input id="colorPicker" ej-colorpicker [value]="value"/>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// Create ColorPicker instance
var colorObj = $("#colorPicker").data("ejColorPicker");
var color=colorObj.hexCodeToRGB("#278787"); // Convert color value from hexCode to RGB
alert("Red="+color.r+", Green="+color.g+", Blue="+color.b);
hide()
Hides the ColorPicker popup, if in opened state.
Example
<input id="colorPicker" ej-colorpicker [value]="value"/>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// Create ColorPicker instance
var colorObj = $("#colorPicker").data("ejColorPicker");
colorObj.hide(); // hide the ColorPicker popup
HSVToRGB(HSV)
Convert color value from HSV to RGB
####Returns
object
Name | Type | Description |
---|---|---|
HSV | object | Specified HSV code converted to RGB |
Example
<input id="colorPicker" ej-colorpicker [value]="value"/>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// Create ColorPicker instance
var colorObj = $("#colorPicker").data("ejColorPicker");
var color=colorObj.HSVToRGB({h:230,s:98,v:98}); // Convert color value from HSV to RGB
alert("Red="+color.r+", Green="+color.g+", Blue="+color.b);
RGBToHEX(rgb)
Convert color value from RGB to HEX
####Returns
string
Name | Type | Description |
---|---|---|
RGB | object | Specified RGB code converted to HEX code |
Example
<input id="colorPicker" ej-colorpicker [value]="value"/>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// Create ColorPicker instance
var colorObj = $("#colorPicker").data("ejColorPicker");
alert(colorObj.RGBToHEX(colorObj.getColor())); // Convert color value from RGB to HEX
RGBToHSV(rgb)
Convert color value from RGB to HSV
####Returns
object
Name | Type | Description |
---|---|---|
RGB | object | Specified RGB code converted to HSV code |
Example
<input id="colorPicker" ej-colorpicker [value]="value"/>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// Create ColorPicker instance
var colorObj = $("#colorPicker").data("ejColorPicker");
var color=colorObj.RGBToHSV({r:39,g:135,b:135}); // Convert color value from RGB to HSV
alert("H="+color.r+", S="+color.g+", V="+color.b);
show()
Open the ColorPicker popup.
Example
<input id="colorPicker" ej-colorpicker [value]="value"/>
// Create Color picker
$('#colorPicker').ejColorPicker({ value: "#278787" });
// Create ColorPicker instance
var colorObj = $("#colorPicker").data("ejColorPicker");
colorObj.show(); // open the ColorPicker popup
Events
ejchange
Fires after Color value has been changed successfully.If the user want to perform any operation after the color value changed then the user can make use of this change event.
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
changeFrom | string | return the previous color value | model |
|
returns the color picker model |
type | string | returns the name of the event |
value | string | return the changed color value |
Example
<input id="colorPicker" ej-colorpicker (ejchange)="onChange($event)"/>
export class AppComponent {
constructor(){
}
onChange(e: any){
// Your code here
}
}
close
Fires after closing the color picker popup.
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
model |
|
returns the color picker model |
type | string | returns the name of the event |
Example
<input id="colorPicker" ej-colorpicker (close)="onClose($event)"/>
export class AppComponent {
constructor(){
}
onClose(e: any){
// Your code here
}
}
create
Fires after Color picker control is created. If the user want to perform any operation after the color picker control creation then the user can make use of this create event.
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
|
object | returns the color picker model |
type | string | returns the name of the event |
Example
<input id="colorPicker" ej-colorpicker (create)="onCreate($event)"/>
export class AppComponent {
constructor(){
}
onCreate(e: any){
// Your code here
}
}
destroy
Fires after Color picker control is destroyed. If the user want to perform any operation after the color picker control destroyed then the user can make use of this destroy event.
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
model |
|
returns the color picker model |
type | string | returns the name of the event |
Example
<input id="colorPicker" ej-colorpicker (destroy)="onDestroy($event)"/>
export class AppComponent {
constructor(){
}
onDestroy(e: any){
// Your code here
}
}
open
Fires after opening the color picker popup
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
model |
|
returns the color picker model |
type | string | returns the name of the event |
Example
<input id="colorPicker" ej-colorpicker (open)="onOpen($event)"/>
export class AppComponent {
constructor(){
}
onOpen(e: any){
// Your code here
}
}
select
Fires after Color value has been selected successfully. If the user want to perform any operation after the color value selected then the user can make use of this select event.
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
model |
|
returns the color picker model |
type | string | returns the name of the event |
value | string | return the selected color value |
Example
<input id="colorPicker" ej-colorpicker (select)="onSelect($event)"/>
export class AppComponent {
constructor(){
}
onSelect(e: any){
// Your code here
}
}