New to Kendo UI for AngularStart a free 30-day trial

Represents the Kendo UI ColorPalette component.

The ColorPaletteComponent provides a set of predefined palette presets and lets you implement a custom color palette. You can use it directly or as part of the kendo-colorpicker.

Definition

Package:@progress/kendo-angular-inputs

Selector:kendo-colorpalette

Export Name:Accessible in templates as #kendoColorPaletteInstance="kendoColorPalette"

Syntax:

html
<kendo-colorpalette [palette]="['#fff', '#000']" [(value)]="selectedColor"></kendo-colorpalette>

Inputs

columns

number

Sets the number of columns to display.

Default:

10

disabled

boolean

Disables the ColorPalette. To disable it in reactive forms, see Forms Support.

Specifies the output format of the ColorPaletteComponent. The input value may be in a different format. The component parses it into the output format.

Default:

'hex'

palette

string | string[]

Sets the color palette to display. You can use a predefined palette preset (such as office, basic, or apex), string with comma-separated colors, or an array of string colors.

readonly

boolean

Sets the read-only state of the ColorPalette.

Default:

false

Sets the size of the ColorPalette internal elements. The default value is set by the Kendo theme.

tabindex

number

Sets the tabindex of the component.

Default:

0

Sets the size of a color cell. The default tile size depends on the size of the component.

value

string

Sets the value of the selected color.

Events

selectionChange

EventEmitter​<string>

Fires when the color selection changes.

valueChange

EventEmitter​<string>

Fires when the value changes.

Methods

Clears the color value of the ColorPalette.