ColorPicker Views

Updated over 6 months ago

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:

• ColorPickerGradientView - allows unlimited color selection from an HSVA canvas. This view also renders textboxes for typing a color in RGB or HEX format.
• ColorPickerPaletteView - 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 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

• ColorPicker Events
• ColorPicker Views Demo