Blazor ColorGradient - Overview
- EXAMPLE
- VIEW SOURCE
- EDIT IN TELERIK REPL
- Change Theme
default
T-shirt Design
- Overview.razor
- TShirtDesignTemplate.razor
The ColorGradient 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 ColorGradient renders an HSV canvas editor for customizing the color and its opacity and value fields for viewing and editing color values in HEX or RGB formats. This is a very easy way to implement a fully functional and precise color picker for your Blazor applications.
The ColorGradient supports the following features:
- Value: Set the exact color. You can manually set the default value or set it programmatically via two-way binding.
- Formats: Choose to allow your users to see and edit colors in HEX, RGB or both formats (both are enabled by default).
- Format: Set the color format that the user sees by default (RGB is default).
- ValueFormat: Set the color format the applications return in code (RGB is default).
- Show opacity editor: By default, an opacity will appear. You can decide to disable it.
The demo above is a fully functional Blazor ColorGradient example. Use the vertical sliders on the right side to choose the base color and opacity. Click and drag on the gradient canvas to fine-tune your selection. At the bottom, you can decide to show the color values in HEX or RGBA. The value changes as you manipulate the sliders and color selector. You can also enter the numeric values manually.
Take a look at the “View Source” tab and you can see that it only takes a line of code to instantiate the Blazor ColorGradient component and another to set the default color.