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:

• FlatColorPickerGradientView - allows unlimited color selection from an HSVA canvas. This view also renders textboxes for typing a color in RGB or HEX format.
• FlatColorPickerPaletteView - allows color selection from a predefined collection of colors.

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

• FlatColorPicker Events
• FlatColorPicker Views Demo