ColorPickerComponent
Represents the Kendo UI ColorPicker component for Angular.
Designed to replace the <input type="color"> HTML5 tag which is not widely supported in browsers.
Selector
kendo-colorpicker
Inputs
disabled
boolean
Sets the disabled state of the ColorPicker.
format
Specifies the output format of the ColorPicker.
The input value may be in a different format. However, it will be parsed into the output format
after the component processes it.
If the gradient view is used with the opacity option set to true, this setting will be ignored and rgba will be used instead.
The supported values are:
rgba(default)hex- name
icon
string
Defines the name of an existing icon in the Kendo UI theme.
Provide only the name of the icon without the k-icon or the k-i- prefixes.
For example, edit-tools will be parsed to k-icon k-i-edit-tools.
iconClass
string | Array<string> | {[key: string]: boolean}
A CSS class name which displays an icon in the ColorPicker button.
iconClass is compatible with the ngClass syntax.
Takes precedence over icon if both are defined.
readonly
boolean
Sets the read-only state of the ColorPicker.
view
Sets what view the ColorPicker will render in the popup.
gradientSettings
Configures the gradient that is displayed in the ColorPicker popup.
paletteSettings
Configures the palette that is displayed in the ColorPicker popup.
popupSettings
Configures the popup of the ColorPicker.
tabindex
number
Specifies the tabindex of the component.
value
string
Specifies the value of the initially selected color.
Fields
container
ViewContainerRef
Provides a reference to a container element inside the component markup. The container element references the location of the appended popup— for example, inside the component markup.
isFocused
boolean
Indicates whether the ColorPicker wrapper is focused.
isOpen
boolean
Indicates whether the ColorPicker popup is open.
Events
activeColorClick
Fires each time the left side of the ColorPicker wrapper is clicked. The event is triggered regardless of whether a ColorPicker icon is set or not.
The ActiveColorClickEvent event provides the option to prevent the popup opening.
close
EventEmitter<PreventableEvent>
Fires each time the popup is about to close. This event is preventable. If you cancel it, the popup will remain open.
blur
EventEmitter<any>
Fires each time the ColorPicker is blurred.
focus
EventEmitter<any>
Fires each time ColorPicker is focused.
open
EventEmitter<PreventableEvent>
Fires each time the popup is about to open. This event is preventable. If you cancel it, the popup will remain closed.
valueChange
EventEmitter<any>
Fires each time the value is changed.
Methods
blur
Blurs the ColorPicker.
focus
Focuses the wrapper of the ColorPicker.
reset
Clears the color value of the ColorPicker.
toggle
Toggles the popup of the ColorPicker.
Does not trigger the open and close events of the component.
Parameters
open?
boolean
An optional parameter. Specifies whether the popup will be opened or closed.
