ColorPicker are rendered by the <BlazorColorPicker.ColorPicker />. This component needs to be added to the main layout of your application/site. You typically do this in the MainLayout.razor file at the end of the
Usage
@page "/"
@using BlazorColorPicker
@inject IColorPickerService ColorPickerService
<button class="btn btn-primary" @onclick="OpenModal">
<div style="background-color:@color" class="buttonColor"></div> Select a Color
</button>
@code {
private string color = "#F1F7E9";
private async Task OpenModal()
{
var parameters = new ColorPickerParameters
{
ColorSelected = color,
};
color = await ColorPickerService.ShowColorPicker(parameters);
}
}
Release Notes
Version 4.1.1
Performance & memory optimization: default colors are now static and shared across all instances
Fixed memory leak in OnParametersSet() that caused unbounded list growth
Zero allocations when using default color palette
Version 4.0.2
>- Added AddColorPicker() to simplify declaration
Version 4.0.1
>- increase the z-index to 9999
Version 4.0.0
>- the implementation has been improved: version 4.0 uses a service declared via dependency injection
⚠️ Breaking changes ⚠️
Version 3.1.0
>- you can customise the size of the palette using your CSS styles
>- A red colour of the first column was not correct
>- Re-addition of .NET7 compatibility
Version 2.2.0
Remove the internal use of IJSRuntime
Version 2.1.0
no need to declare the _content/BlazorColorPicker/colorpicker.js file
