ColorPickerComponent

Configures the layout of the Apply and Cancel action buttons.

Sets the initially active view in the popup. Supports two-way binding.

Enables or disables the adaptive mode. By default, adaptive rendering is disabled.

Sets the subtitle of the ActionSheet rendered instead of the Popup on small screens. By default, the ActionSheet does not render a subtitle.

Sets the title of the ActionSheet rendered instead of the Popup on small screens.

Specifies whether the ColorPicker displays a Clear color button.

Sets the disabled state of the ColorPicker. To disable it in reactive forms, see Forms Support.

The fillMode property specifies the background and border styles of the ColorPicker (see example). The default value is set by the Kendo theme.

Specifies the output format of the ColorPicker.

If the input value is in a different format, the component parses it into the specified output format.

Configures the gradient displayed in the ColorPicker popup.

Defines the name of an existing icon in the Kendo UI theme. Provide only the name of the icon without the k-icon or k-i- prefixes.

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.

Configures the palette displayed in the ColorPicker popup.

Configures the popup of the ColorPicker.

Displays Apply and Cancel action buttons and color preview panes.

When enabled, the component value does not change immediately upon color selection, but only after the Apply button is clicked.

The Cancel button reverts the current selection to its previous state, i.e., to the current value.

Sets the read-only state of the ColorPicker.

The rounded property specifies the border radius of the ColorPicker (see example). The default value is set by the Kendo theme.

The size property specifies the padding of the ColorPicker internal elements (see example). The default value is set by the Kendo theme.

Defines an SVGIcon to render within the button. The input can take either an existing Kendo SVG icon or a custom one.

Sets the tabindex of the component.

Sets the value of the selected color.

Specifies the views rendered in the popup. By default, both the gradient and palette views are rendered.

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.

Indicates whether the ColorPicker wrapper is focused.

Returns the current open state. Returns true if the Popup (or ActionSheet in adaptive mode) is currently open.

Fires when 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.

Fires when the view is about to change. Used to provide a two-way binding for the activeView property.

Fires when the ColorPicker is blurred.

Fires when the user cancels the current color selection.

Fires on preview pane or 'Cancel' button click.

Fires when the Popup (or ActionSheet in adaptive mode) is about to close. This event is preventable. If you cancel it, the Popup (or the ActionSheet) remains open.

Fires when the ColorPicker is focused.

Fires when the Popup (or ActionSheet in adaptive mode) is about to open. This event is preventable. If you cancel it, the Popup (or the ActionSheet) remains closed.

Fires when the value changes.

Blurs the ColorPicker.

Focuses the wrapper of the ColorPicker.

Clears the value of the ColorPicker.

Toggles the Popup (or ActionSheet in adaptive mode) of the ColorPicker. Does not trigger the open and close events of the component.