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

FlatColorPicker Views

The FlatColorPicker 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 FlatColorPicker FlatColorPickerViews container and View attribute.

FlatColorPickerGradientView

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

  • Format
  • Formats
  • ShowOpacityEditor

FlatColorPickerPaletteView

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

  • Columns
  • Colors
  • TileWidth
  • TileHeight

Example

@* Blazor FlatColorPicker Views *@

<TelerikFlatColorPicker @bind-Value="@Color">
    <FlatColorPickerViews>
        <FlatColorPickerGradientView Format="ColorFormat.Hex"
                                 ShowOpacityEditor="true" />
        <FlatColorPickerPaletteView Colors="ColorPalettePresets.Basic"
                                Columns="5"
                                TileWidth="40px"
                                TileHeight="40px" />
    </FlatColorPickerViews>
</TelerikFlatColorPicker>

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

See Also

In this article