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: 3 months 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 (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-03-31T06:55:37.000Z (7 months ago)
• Last Synced: 2024-07-07T18:23:00.371Z (4 months 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: 9.39 MB
• Stars: 31
• Watchers: 2
• Forks: 9
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-blazor - Blazor-Color-Picker -  Opens a palette with the Material colors for Blazor application. (Libraries & Extensions / Tools & Utilities)

README

        
# Blazor-Color-Picker

[![NuGet](https://img.shields.io/nuget/v/BlazorColorPicker.svg)](https://www.nuget.org/packages/BlazorColorPicker/) ![BlazorColorPicker Nuget Package](https://img.shields.io/nuget/dt/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

![Blazor Color Picker](https://github.com/tossnet/Blazor-Color-Picker/blob/master/BlazorColorPicker.gif)

# Installation

Latest version in here: [![NuGet](https://img.shields.io/nuget/v/BlazorColorPicker.svg)](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

```

## Usage

```html

@page "/"

@using BlazorColorPicker

Hello, world!


    
 Select a Color


@code {

    bool isOpened = false;

    string color = "#F1F7E9";

    void OpenModal()

    {

        isOpened = true;

    }

    void ClosedEvent(string value)

    {

        color = value;

        isOpened = false;

    }

}

```

## Release Notes

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

## ⚠️ Breaking changes ⚠️

Version 2.1.0

    

>- no need to declare the _content/BlazorColorPicker/colorpicker.js file