Kendo UI for Angular FlatColorPicker Overview
The Kendo UI for Angular FlatColorPicker enables the user to select and submit color values.
The FlatColorPicker component provides a rich interface to choose a color from Palette and Gradient views. It enables the user to preview the selected color before submit and to ensure that a certain contrast requirements are met.
The following example demonstrates the FlatColorPicker in action.
Example
View Source
Change Theme:
Key Features
- Views—The FlatColorPicker provides options for displaying gradient and palette views, as well as switching between them in a seamless way.
- Color Preview—You can enable the user to preview and compare the selected color with the FlatColorPicker value, before applying it. Additionally, the current selection can be reverted to its initial state.
- Color Contrast Tool—The FlatColorPicker provides an option for displaying a contrast tool. It ensures the user that the selected color meets certain contrast requirements like AA or AAA.
- Customizing the FlatColorPicker—You can customize almost any building block of the FlatColorPicker like the views toggle buttons, clear button, action buttons layout, alpha slider etc.
- Disabled FlatColorPicker—You can use the configuration options of the FlatColorPicker to disable the component so that users are not able to interact with it.
- Read-only FlatColorPicker—The FlatColorPicker provides an option for overriding its default active state.
- Debouncing value changes—All Kendo UI for Angular Inputs enable you to implement a slight delay before they accept a new input value.
- Forms support—You can use the FlatColorPicker both in template-driven and reactive Angular forms.
- Appearance—All Kendo UI for Angular Inputs enable you to set their dimensions.
- Globalization—All Kendo UI for Angular Inputs provide globalization options.
- Accessibility—The FlatColorPicker is accessible for screen readers and supports WAI-ARIA attributes.
- Keyboard navigation—The FlatColorPicker supports a number of keyboard shortcuts for processing various commands.
Support and Learning Resources
- FlatColorPicker Homepage
- Getting Started with the Kendo UI for Angular Inputs
- API Reference of the FlatColorPicker
- Getting Started with Kendo UI for Angular (Online Guide)
- Getting Started with Kendo UI for Angular (Video Tutorial)
- Virtual Classroom (Training Courses for Registered Users)
- FlatColorPicker Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base
