New to Kendo UI for Vue? Start a free 30-day trial

Custom ColorPicker

The ColorPicker enables you to customize its appearance.

The component supports the following options:

Customizing the Palette Popup

To specify the rendering, columns, and tile sizes of the ColorPicker, and to customize the color formats of its palette, use the paletteSettings option.

Example
View Source
Change Theme:

Customizing the Gradient Popup

To customize the gradient options of the ColorPicker, use the gradientSettings configuration.

The following example demonstrates how to specify if the opacity slider of the ColorGradient will be displayed.

Example
View Source
Change Theme:

Displaying Kendo UI for Vue Icons

To display an existing Kendo UI for Vue icon in the ColorPicker button, provide the name of that icon without the k-icon class and the k-i- prefix to the icon property of the component. For example, instead of k-icon k-i-edit-tools, add edit-tools.

Example
View Source
Change Theme:

Displaying Custom Icons

To display a custom icon in the ColorPicker button, provide the full CSS class name of the icon to the iconClassName property of the component.

Example
View Source
Change Theme: