LgColorPickerBox

LgColorPickerBox permet de sélectionner une couleur dans une palette déroulante ou de saisir une couleur personnalisée (nom CSS ou code hexadécimal). Il hérite de LgTextBox : la valeur liée est une chaîne, normalisée au format hexadécimal majuscule (#RRGGBB).

<LgColorPickerBox Label="#Color" @bind-Value="_model.Color" />

• Espace de noms : Lagoon.UI.Components
• Hérite de : LgTextBox → LgInputRenderBase<string> → LgInputBase<string> → LgAriaComponentBase → LgComponentBase
• Interfaces : ILgDropDownComponent
• Package NuGet : Lagoon.UI

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Sélection dans la palette

Sans paramètre, la palette proposée est celle de la configuration de comportement de l'application. La saisie accepte un nom CSS (red), un code hexadécimal complet (#FF0000), court (#f00) ou sans # (f00) — la valeur est toujours normalisée en #RRGGBB.

TagColorPage.razor

<LgColorPickerBox Label="#TagColor" @bind-Value="_model.Color" />

TagColorPage.razor.cs

public partial class TagColorPage : LgPage
{
    private readonly TagVm _model = new();

    private sealed class TagVm
    {
        public string Color { get; set; }
    }
}

Palette spécifique au champ

Palette remplace la palette de l'application pour ce champ.

ThemeColorPage.razor

<LgColorPickerBox Label="#ThemeColor"
                  Palette="_customPalette"
                  @bind-Value="_model.Color" />

ThemeColorPage.razor.cs

public partial class ThemeColorPage : LgPage
{
    // Couleurs de la charte : seul ce nuancier est proposé à l'utilisateur.
    private readonly List<string> _customPalette = new() { "#1B6EC2", "#0E7490", "#22B8DD" };

    private readonly ThemeVm _model = new();

    private sealed class ThemeVm
    {
        public string Color { get; set; }
    }
}

La palette par défaut de toute l'application se personnalise dans la configuration de comportement du client (Main du projet client).

Saisie hexadécimale et message d'erreur

ShowInput affiche ou masque le champ de saisie hexadécimal (par défaut, la configuration de l'application s'applique). ParsingErrorMessage personnalise le message affiché quand la valeur n'est pas une couleur valide.

BadgeColorPage.razor

@* Sélection stricte dans la palette, sans saisie libre. *@
<LgColorPickerBox Label="#BadgeColor"
                  ShowInput="false"
                  @bind-Value="_model.PaletteColor" />

@* Saisie libre avec message d'erreur métier. *@
<LgColorPickerBox Label="#CustomColor"
                  ShowInput="true"
                  ParsingErrorMessage="#InvalidBadgeColor"
                  @bind-Value="_model.CustomColor" />

BadgeColorPage.razor.cs

public partial class BadgeColorPage : LgPage
{
    private readonly BadgeVm _model = new();

    private sealed class BadgeVm
    {
        public string PaletteColor { get; set; }
        public string CustomColor { get; set; }
    }
}

Réagir au changement de valeur

OnChangingAsync (hérité de LgTextBox) est appelé avant l'affectation et permet d'annuler le changement (args.Cancel) ; OnChange est appelé après.

ChartColorPage.razor

<LgColorPickerBox Label="#SeriesColor"
                  OnChangingAsync="OnColorChangingAsync"
                  @bind-Value="_model.SeriesColor" />

ChartColorPage.razor.cs

public partial class ChartColorPage : LgPage
{
    private readonly ChartVm _model = new();

    // Appelé avant le changement : refuse les couleurs déjà utilisées par une autre série.
    private Task OnColorChangingAsync(ChangingEventArgs<string> args)
    {
        if (args.NewValue == "#FF0000")
        {
            args.Cancel = true;
            ShowWarning("#ColorAlreadyUsed");
        }
        return Task.CompletedTask;
    }

    private sealed class ChartVm
    {
        public string SeriesColor { get; set; }
    }
}

Propriétés

Toutes les propriétés [Parameter] du composant, y compris celles héritées.

Nom	Type	Défaut	Déclaré dans	Description
Palette	List<string>	null	LgColorPickerBox	Couleurs proposées dans la palette. Si null, la palette de la configuration de l'application est utilisée.
ParsingErrorMessage	string	#lgColorBoxErrFormat	LgColorPickerBox	Message d'erreur affiché quand la saisie n'est pas une couleur valide.
ShowInput	bool?	null	LgColorPickerBox	Affiche le champ de saisie hexadécimal. Si null, la configuration de l'application s'applique.
AllowResize	bool	false	LgTextBox	Autorise le redimensionnement lorsque TextMode vaut TextBoxMode.Multiline.
AutoComplete	bool	false	LgTextBox	Active l'autocomplétion du navigateur si true ; sinon l'attribut autocomplete="off" est rendu.
AutoUnmask	bool	false	LgTextBox	Retourne la valeur sans le masque lorsque InputMask est utilisé.
ClearIncomplete	bool	false	LgTextBox	Vide la valeur si le masque de saisie est incomplet.
DataList	List<string>	null	LgTextBox	Liste de valeurs utilisée pour rendre un datalist associé à l'entrée.
InputMask	string	null	LgTextBox	Masque de saisie appliqué au champ texte.
InputMaskKind	InputMaskKind	None	LgTextBox	Type de masque de saisie.
MaxLength	int?	null	LgTextBox	Nombre maximal de caractères.
MaxRows	int?	null	LgTextBox	Nombre maximal de lignes lorsque TextMode vaut TextBoxMode.Multiline.
MinRows	int?	null	LgTextBox	Nombre minimal de lignes lorsque TextMode vaut TextBoxMode.Multiline.
OnChangeDisabled	bool	false	LgTextBox	Désactive le gestionnaire onchange natif du champ.
OnChangingAsync	Func<ChangingEventArgs<string>, Task>	null	LgTextBox	Callback appelé avant le changement de valeur ; le changement peut y être annulé.
OnFocus	EventCallback<FocusEventArgs>	—	LgTextBox	Callback appelé à la prise de focus.
OnInput	EventCallback<ChangeEventArgs>	—	LgTextBox	Callback appelé à la saisie (oninput).
OnKeyUp	EventCallback<KeyboardEventArgs>	—	LgTextBox	Callback appelé au relâchement d'une touche.
Placeholder	string	"red, #FF0000, #f00, f00, ..."	LgTextBox	Texte indicatif du champ de saisie hexadécimal.
Rows	int?	null	LgTextBox	Nombre de lignes lorsque TextMode vaut TextBoxMode.Multiline.
TextMode	TextBoxMode?	null	LgTextBox	Mode du champ texte. Laisser null pour le sélecteur de couleur.
Prefix	string	null	LgInputRenderBase	Préfixe affiché dans le champ.
PrefixType	InputLabelType	Text	LgInputRenderBase	Nature du préfixe.
Suffix	string	null	LgInputRenderBase	Suffixe affiché dans le champ.
SuffixType	InputLabelType	Text	LgInputRenderBase	Nature du suffixe.
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgInputBase	Attributs HTML additionnels appliqués à l'élément rendu.
AutoFocus	bool	false	LgInputBase	Donne le focus au champ lors du premier rendu.
ConfirmationMessage	string	null	LgInputBase	Message de confirmation affiché avant d'appliquer un changement de valeur.
Container	IInputContainer<string>	null	LgInputBase	Usage interne : rattache une cellule de GridView au champ.
CssClass	string	null	LgInputBase	Classes CSS additionnelles.
Disabled	bool	false	LgInputBase	Désactive le champ.
DisplayName	string	null	LgInputBase	Nom du champ utilisé dans les messages d'erreur.
HideValidationMessage	bool	false	LgInputBase	Masque le message de validation sous le champ.
Label	string	null	LgInputBase	Libellé du champ.
LabelContent	RenderFragment	null	LgInputBase	Contenu personnalisé de la zone de libellé.
OnChange	EventCallback<ChangeEventArgs>	—	LgInputBase	Callback appelé après le changement de valeur.
OnReset	EventCallback<ChangeEventArgs>	—	LgInputBase	Callback appelé quand le champ est réinitialisé par le bouton d'effacement.
PolicyEdit	string	null	LgInputBase	Policy requise pour modifier le champ.
PolicyVisible	string	null	LgInputBase	Policy requise pour afficher le champ.
ReadOnly	bool	false	LgInputBase	Affiche la couleur en lecture seule.
Required	bool?	null	LgInputBase	Champ obligatoire. Si null, déduit de l'attribut [Required] de la propriété liée. Un champ obligatoire n'affiche pas le bouton d'effacement.
ResetButton	bool?	null	LgInputBase	Affiche le bouton d'effacement. Si null, la configuration de comportement de l'application s'applique.
ResetText	string	null	LgInputBase	Texte du bouton d'effacement.
ResetTextAriaLabel	string	null	LgInputBase	Libellé accessible (aria-label) du bouton d'effacement.
Tooltip	string	null	LgInputBase	Bulle d'aide.
TooltipIsHtml	bool	false	LgInputBase	Indique si le contenu du Tooltip est au format HTML (sinon texte brut).
Value	string	null	LgInputBase	Couleur liée (@bind-Value), normalisée au format #RRGGBB.
ValueChanged	EventCallback<string>	—	LgInputBase	Callback de mise à jour de la valeur liée.
ValueExpression	Expression<Func<string>>	—	LgInputBase	Expression identifiant la propriété liée.
AriaLabel	string	null	LgAriaComponentBase	Valeur de l'attribut aria-label.
AriaLabelledBy	string	null	LgAriaComponentBase	Valeur de l'attribut aria-labelledby.

Paramètres en cascade

LgColorPickerBox consomme aussi des paramètres fournis automatiquement par des composants ancêtres (vous n'avez pas à les définir) : ParentAuthorizeView (LgAuthorizeView) et le contexte d'édition d'un LgEditForm parent.

Événements

Événement	Type	Description
OnChangingAsync	Func<ChangingEventArgs<string>, Task>	Avant le changement de couleur ; args.Cancel = true annule le changement.
OnChange	EventCallback<ChangeEventArgs>	Après le changement de couleur.
OnFocus	EventCallback<FocusEventArgs>	À la prise de focus du champ.
OnReset	EventCallback<ChangeEventArgs>	À la réinitialisation par le bouton d'effacement.

Bonnes pratiques / accessibilité

• Stockez la valeur normalisée #RRGGBB telle quelle : le composant la produit en majuscules, quel que soit le format saisi.
• ShowInput="false" limite l'utilisateur à la palette : combinez-le avec Palette pour imposer un nuancier.

Référence complète

Tous les paramètres (hérités compris) : Référence API — LgColorPickerBox.

Composants liés

• LgTextBox — champ texte de base.
• LgGridColorColumn — colonne couleur d'un LgGridView.