https://github.com/tossnet/blazor-color-picker
Opens a palette with the Material colors for Blazor application
https://github.com/tossnet/blazor-color-picker
blazor blazor-application blazor-client blazor-color-picker blazor-component blazor-server blazor-webassembly color-picker material-colors nuget palette
Last synced: 27 days ago
JSON representation
Opens a palette with the Material colors for Blazor application
- Host: GitHub
- URL: https://github.com/tossnet/blazor-color-picker
- Owner: tossnet
- License: gpl-3.0
- Created: 2020-05-23T13:47:06.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2025-03-16T15:59:20.000Z (about 2 months ago)
- Last Synced: 2025-03-29T10:05:54.112Z (about 1 month ago)
- Topics: blazor, blazor-application, blazor-client, blazor-color-picker, blazor-component, blazor-server, blazor-webassembly, color-picker, material-colors, nuget, palette
- Language: C#
- Homepage:
- Size: 10.8 MB
- Stars: 35
- Watchers: 2
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Blazor-Color-Picker
[](https://www.nuget.org/packages/BlazorColorPicker/) 
Sometimes HTML5 colorpicker doesn't suit me for an application. I prefer to offer the user a predefined color palette
DEMO : https://tossnet.github.io/Blazor-Color-Picker/
Opens a palette with the Material colors
# Installation
> [!WARNING]
> The implementation has been improved: version 4.0 uses a service declared via dependency injection
Latest version in here: [](https://www.nuget.org/packages/BlazorColorPicker/)
To Install
```
Install-Package BlazorColorPicker
```
or
```
dotnet add package BlazorColorPicker
```
For client-side and server-side Blazor - add script section to index.html or _Host.cshtml (head section)
```html
```
In program.cs, declare
```csharp
builder.Services.AddColorPicker();
```
**ColorPicker** are rendered by the ``. 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 section.
## Usage
```html
@page "/"
@using BlazorColorPicker
@inject IColorPickerService ColorPickerService
Select a Color
@code {
private string color = "#F1F7E9";
private async Task OpenModal()
{
var parameters = new ColorPickerParameters
{
ColorSelected = color,
};
color = await ColorPickerService.ShowColorPicker(parameters);
}
}
```
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