Color Palette Overview
The Blazor Color Palette component provides a list of color tiles for the user to pick a color from by clicking or tapping. You can choose a predefined list of colors, or create your own. Two-way binding and events let you react to the user choice.
The Color Palette component is part of Telerik UI for Blazor, a
professional grade UI library with 75+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Basics
To use a Telerik Color Palette for Blazor:
- Add the
<TelerikColorPalette>
tag. - Bind its
Value
to thestring
you want to get out of it. - Optionally, choose a list of
Colors
to show the user (one of the presets we provide, or a set of custom colors).- If you do not provide a value for the
Colors
, it will default to theOffice
preset.
- If you do not provide a value for the
Basic color palette with two-way value binding and a default predefined palette
<span style="color: @MyColor">@MyColor</span>
<br />
<TelerikColorPalette @bind-Value="@MyColor">
</TelerikColorPalette>
@code {
public string MyColor { get; set; }
}
The result from the code snippet above after selecting a color
Appearance
You can control the appearane of the component not only through the lists of Colors
you provide to it, but also its size through the Columns
, TileWidth
and TileHeight
parameters.
Make a large color palette with few columns
@SelectedColor
<TelerikColorPalette Colors="@ColorPalettePresets.Basic" @bind-Value="@SelectedColor"
Columns="5" TileHeight="3em" TileWidth="3em">
</TelerikColorPalette>
@code{
string SelectedColor { get; set; }
}
Theresult from the code snippet above
Component Reference
<TelerikColorPalette @ref="@TheColorPaletteRef"></TelerikColorPalette>
@code{
Telerik.Blazor.Components.TelerikColorPalette TheColorPaletteRef { get; set; }
}
Features
The Color Palette provides the following features:
Class
- the CSS class that will be rendered on the wrapping element of the component.Colors
- the collection of colors the user can choose from. Can be one of the presets that come with the component, or a custom list.Columns
- the number of columns to use when rendering the Colors list. Determines the size of the component together with theTileHeight
andTileWidth
.Enabled
- whether the component is enabled.Id
- renders as theid
attribute on the wrapping element of the component.TabIndex
- maps to thetabindex
attribute of the main HTML element. You can use it to customize the order in which the elements in your page focus with theTab
key.TileHeight
- the height of each individual color item. Determines the size of the component together with theColumns
andTileWidth
. Can take CSS dimensions stringsTileWidth
- the width of each individual color item. Determines the size of the component together with theColumns
andTileHeight
. Can take CSS dimensions stringsValue
- get/set the value of the input, can be used for binding. Can take any string that can be a CSS background-color string. The presets we provide use hex format (#123abc
).Events to let you react to the user actions.
Validation - see the Input Validation article.