New to Telerik UI for Blazor? Download free 30-day trial

ColorPicker Views

The ColorPicker popup can display different views. They allow users to select a color from an interface that matches their preferences. The supported views are:

By default, both views are enabled and the gradient view is displayed first. Both behaviors can be configured via the ColorPicker ColorPickerViews container and View attribute.

ColorPickerGradientView

The GradientView uses a TelerikColorGradient component. The following ColorGradient attributes are exposed in the ColorPickerGradientView tag:

  • Format
  • Formats
  • ShowOpacityEditor

ColorPickerPaletteView

The PaletteView uses a TelerikColorPalette component. The following ColorPalette attributes are exposed in the ColorPickerPaletteView tag:

  • Columns
  • Colors
  • TileWidth
  • TileHeight

Example

@* Blazor ColorPicker Views *@

<TelerikColorPicker @bind-Value="@Color">
    <ColorPickerViews>
        <ColorPickerGradientView Format="ColorFormat.Hex"
                                 ShowOpacityEditor="true" />
        <ColorPickerPaletteView Colors="ColorPalettePresets.Basic"
                                Columns="5"
                                TileWidth="40px"
                                TileHeight="40px" />
    </ColorPickerViews>
</TelerikColorPicker>

@code {
    string Color { get; set; }
}

See Also

In this article