ColorPicker

ColorPicker component is a user interface to select and adjust color values. It provides supports for various color specification like Red Green Blue, Hue Saturation Value and Hex codes.

<input type="color" id="color-picker">

<script>
  let colorPickerObj: ColorPicker = new ColorPicker(null , "#color-picker");
</script>

Properties

columns

number

It is used to render the ColorPicker palette with specified columns.

Defaults to 10

createPopupOnClick

boolean

Specifies the popup element creation on open.

Defaults to false

cssClass

string

This property sets the CSS classes to root element of the ColorPicker which helps to customize the UI styles.

Defaults to ”

disabled

boolean

It is used to enable / disable ColorPicker component. If it is disabled the ColorPicker popup won’t open.

Defaults to false

enableOpacity

boolean

It is used to enable / disable the opacity option of ColorPicker component.

Defaults to true

enablePersistence

boolean

To enable or disable persisting component’s state between page reloads and it is extended from component class.

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

inline

boolean

It is used to render the ColorPicker component as inline.

Defaults to false

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ”

mode

ColorPickerMode

It is used to render the ColorPicker with the specified mode.

Defaults to ‘Picker’

modeSwitcher

boolean

It is used to show / hide the mode switcher button of ColorPicker component.

Defaults to true

noColor

boolean

It is used to enable / disable the no color option of ColorPicker component.

Defaults to false

presetColors

{ [key: string]: string[] }

It is used to load custom colors to palette.

Defaults to null

showButtons

boolean

It is used to show / hide the control buttons (apply / cancel) of ColorPicker component.

Defaults to true

value

string

It is used to set the color value for ColorPicker. It should be specified as Hex code.

Defaults to ‘#008000ff’

Methods

addEventListener

Adds the handler to the given event listener.

Returns void

appendTo

Appends the control within the given HTML element

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

Removes the component from the DOM and detaches all its related event handlers. Also it maintains the initial input element from the DOM.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

focusIn

Sets the focus to Colorpicker its native method

Returns void

getLocalData

Returns the persistence data for component

Returns any

getPersistData

Gets the properties to be maintained in the persisted state.

Returns string

getRootElement

Returns the route element of the component

Returns HTMLElement

getValue

To get color value in specified type.

Returns string

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Returns void

toggle

To show/hide ColorPicker popup based on current state of the SplitButton.

Returns void

Inject

Dynamically injects the required modules to the component.

Returns void

Events

beforeClose

EmitType<BeforeOpenCloseEventArgs>

Triggers before closing the ColorPicker popup.

beforeModeSwitch

EmitType<ModeSwitchEventArgs>

Triggers before Switching between ColorPicker mode.

beforeOpen

EmitType<BeforeOpenCloseEventArgs>

Triggers before opening the ColorPicker popup.

beforeTileRender

EmitType<PaletteTileEventArgs>

Trigger while rendering each palette tile.

change

EmitType<ColorPickerEventArgs>

Triggers while changing the colors. It will be triggered based on the showButtons property. If the property is false, the event will be triggered while selecting the colors. If the property is true, the event will be triggered while apply the selected color.

created

EmitType<Event>

Triggers once the component rendering is completed.

onModeSwitch

EmitType<ModeSwitchEventArgs>

Triggers after Switching between ColorPicker mode.

open

EmitType<OpenEventArgs>

Triggers while opening the ColorPicker popup.

select

EmitType<ColorPickerEventArgs>

Triggers while selecting the color in picker / palette, when showButtons property is enabled.