SuperColorPicker

Sélecteur de couleur interactif avec modes HSV, HEX et RGB(A). Inspiré de Radzen ColorPicker.

Basique

Utilisation minimale

Lier la valeur via @bind-Value. Le composant émet un code HEX #RRGGBB.

HEX
Valeur : #3498DB

Avec label

Paramètre Label

Le paramètre Label affiche un libellé au-dessus du picker.

HEX
Valeur : #9B59B6

Avec canal Alpha

ShowAlpha = true

Activez ShowAlpha pour afficher le curseur d'opacité. La valeur émise devient #RRGGBBAA.

HEX
Valeur : #E67E22BF

Valeur initiale

Value = "#E74C3C"

Passer une valeur initiale via le paramètre Value.

HEX
Valeur : #E74C3C

Désactivé

Disabled = true

Le paramètre Disabled désactive toutes les interactions.

HEX

Plusieurs pickers côte à côte

Palette de couleurs

Exemple d'utilisation de plusieurs pickers pour composer une palette.

HEX
HEX
HEX
#2C3E50
#E74C3C
#F39C12

SuperDropDownColorPicker

Version compacte en mode dropdown — un bouton affiche la couleur courante, un clic ouvre le SuperColorPicker dans un panneau flottant.

Basique

Dropdown sans label

Cliquez sur le bouton pour ouvrir le picker. Cliquez en dehors pour fermer.

Valeur : #3498DB

Avec label

Paramètre Label

Le label est cliquable et ouvre également le dropdown.

Valeur : #8E44AD

Avec canal Alpha

ShowAlpha = true

La pastille du bouton reflète l'opacité via le damier en arrière-plan.

Valeur : #E67E22BF

Désactivé

Disabled = true

Le bouton est désactivé, aucune interaction possible.

Usage inline dans un formulaire

Intégration dans une ligne d'UI

Le composant est inline-block et s'intègre naturellement dans une ligne avec d'autres éléments.

#2C3E50
#E74C3C
#F39C12

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please reload the page.