Custom ColorPicker
The ColorPicker enables you to customize its appearance.
The component supports the following options:
- Customizing the palette popup
- Customizing the gradient popup
- Displaying KendoReact icons in the button
- Displaying custom icons in the button
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.
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.
Displaying KendoReact Icons
To display an existing KendoReact 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.
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.