Blazor ColorPicker - Overview
- EXAMPLE
- VIEW SOURCE
- EDIT IN TELERIK REPL
- Change Theme
default
T-shirt Design
- Overview.razor
- TShirtDesignTemplate.razor
The ColorPicker component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Description
The Telerik UI for Blazor ColorPicker component is a powerful tool for picking and editing colors. In its closed state, it looks like a standard dropdown button, but when clicked, the user sees a robust color picker. Allow your users to pick from a color gradient, color palette or both. When using the color gradient tool, users can drag the selector across an HSV canvas, use sliders to set base colors, set opacity and view/edit color values. When using the color palette, users select colors by clicking on a tile from a predefined set of colors.
Other supported features include:
- Clear button: Reset colors back to default.
- Toggle preview: Show or hide color selection preview.
- Toggle buttons: Show or hide Cancel and Apply (commit) buttons in the popup footer.
- Toggle icon: On the button, either show a generic icon or a tile displaying the currently selected color.
- Views: Show the color gradient, color palette or both.
- Button appearance: Configure the button’s fill mode, corner radius and size.
The Blazor ColorPicker combines two other components from the Telerik UI for Blazor librarythe ColorGradient and ColorPalette—into the popup that appears when the button is clicked or tapped.
The demo above is an example of the ColorPicker with all its features enabled. If you take a look at the “View Source” tab, you will see the component is initialized with a single line of code and the default color is set with another.