LgTagBox

LgTagBox permet de saisir une liste de valeurs texte sous forme d'étiquettes (tags). Chaque valeur validée (entrée, point-virgule ou virgule par défaut) devient une étiquette supprimable. La valeur liée est une List<string>.

<LgTagBox Label="#Keywords" @bind-Value="_model.Keywords" />

Espace de noms : Lagoon.UI.Components
Hérite de : LgInputBase<List<string>> → LgAriaComponentBase → LgComponentBase
Package NuGet : Lagoon.UI

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Saisie simple

ArticlePage.razor
<LgTagBox Label="#Keywords"
          Placeholder="#AddKeyword"
          @bind-Value="_model.Keywords" />

ArticlePage.razor.cs
public partial class ArticlePage : LgPage
{
    private readonly ArticleVm _model = new();

    private sealed class ArticleVm
    {
        public List<string> Keywords { get; set; } = new();
    }
}

Limites et doublons

MaxTags limite le nombre d'étiquettes, MaxChars la longueur d'une étiquette. AllowDuplicates autorise deux fois la même valeur. NoWrap fixe la hauteur du champ avec un défilement horizontal au-delà.

RecipientsPage.razor
<LgTagBox Label="#Recipients"
          MaxTags="5"
          MaxChars="50"
          NoWrap="true"
          @bind-Value="_model.Recipients" />

RecipientsPage.razor.cs
public partial class RecipientsPage : LgPage
{
    private readonly RecipientsVm _model = new();

    private sealed class RecipientsVm
    {
        public List<string> Recipients { get; set; } = new();
    }
}

Touches de validation et séparateur

ConfirmKeys liste les codes des touches qui valident une étiquette (par défaut 13, 59, 44 : entrée, point-virgule, virgule). Delimiter est le séparateur utilisé pour joindre les valeurs (point-virgule par défaut).

TagsPage.razor
@* Validation par entrée uniquement, valeurs jointes par une virgule. *@
<LgTagBox Label="#Tags"
          ConfirmKeys="_confirmKeys"
          Delimiter=","
          @bind-Value="_model.Tags" />

TagsPage.razor.cs
public partial class TagsPage : LgPage
{
    // Codes des touches qui valident une étiquette : 13 = entrée.
    private readonly List<int> _confirmKeys = new() { 13 };

    private readonly TagsVm _model = new();

    private sealed class TagsVm
    {
        public List<string> Tags { get; set; } = new();
    }
}

Masque de saisie

InputMaskKind et InputMask contraignent le format de chaque étiquette (comme sur LgTextBox). AutoUnmask retourne la valeur sans le masque et ClearIncomplete vide la saisie si le masque est incomplet.

PhoneListPage.razor
<LgTagBox Label="#PhoneNumbers"
          InputMaskKind="InputMaskKind.Mask"
          InputMask="99-99-99-99-99"
          AutoUnmask="true"
          ClearIncomplete="true"
          @bind-Value="_model.PhoneNumbers" />

PhoneListPage.razor.cs
public partial class PhoneListPage : LgPage
{
    private readonly PhoneListVm _model = new();

    private sealed class PhoneListVm
    {
        public List<string> PhoneNumbers { get; set; } = new();
    }
}

Réagir au changement de valeur

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

LabelsPage.razor
<LgTagBox Label="#Labels"
          OnChangingAsync="OnLabelsChangingAsync"
          @bind-Value="_model.Labels" />

LabelsPage.razor.cs
public partial class LabelsPage : LgPage
{
    private readonly LabelsVm _model = new();

    // Appelé avant le changement : refuse les étiquettes réservées.
    private Task OnLabelsChangingAsync(ChangingEventArgs<List<string>> args)
    {
        if (args.NewValue is not null && args.NewValue.Contains("admin"))
        {
            args.Cancel = true;
            ShowWarning("#ReservedLabel");
        }
        return Task.CompletedTask;
    }

    private sealed class LabelsVm
    {
        public List<string> Labels { get; set; } = new();
    }
}

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
`AllowDuplicates`	`bool`	`false`	`LgTagBox`	Autorise la même étiquette plusieurs fois.
`AutoUnmask`	`bool`	`false`	`LgTagBox`	Retourne la valeur sans le masque lorsque `InputMask` est utilisé.
`ClearIncomplete`	`bool`	`false`	`LgTagBox`	Vide la valeur si le masque de saisie est incomplet.
`ConfirmKeys`	`List<int>`	`[13, 59, 44]`	`LgTagBox`	Codes des touches qui valident une étiquette (entrée, point-virgule, virgule par défaut).
`Delimiter`	`string`	`";"`	`LgTagBox`	Séparateur utilisé pour joindre les valeurs.
`InputMask`	`string`	`null`	`LgTagBox`	Masque de saisie appliqué à chaque étiquette.
`InputMaskKind`	`InputMaskKind`	`None`	`LgTagBox`	Type de masque de saisie.
`InputMaskPlaceholder`	`string`	`null`	`LgTagBox`	Caractère remplissant les positions vides du masque de saisie (par exemple `#` avec le masque `99-99-99-99-99` affiche `##-##-##-##-##`). À ne pas confondre avec `Placeholder`. Sans valeur, le caractère par défaut du masque (`_`) est conservé.
`MaxChars`	`int?`	`null`	`LgTagBox`	Longueur maximale d'une étiquette.
`MaxTags`	`int?`	`null`	`LgTagBox`	Nombre maximal d'étiquettes. Une fois atteint, la classe CSS `bootstrap-tagsinput-max` est appliquée.
`NoWrap`	`bool`	`false`	`LgTagBox`	Fixe la hauteur du champ ; au-delà, une barre de défilement horizontale apparaît.
`OnChangingAsync`	`Func<ChangingEventArgs<List<string>>, Task>`	`null`	`LgTagBox`	Callback appelé avant le changement de valeur ; le changement peut y être annulé.
`Placeholder`	`string`	`null`	`LgTagBox`	Texte indicatif affiché quand le champ est vide. Distinct de `InputMaskPlaceholder`.
`TagCssClass`	`string`	`"label label-info"`	`LgTagBox`	Classes CSS appliquées à chaque étiquette.
`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<List<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 les valeurs en lecture seule.
`Required`	`bool?`	`null`	`LgInputBase`	Champ obligatoire. Si `null`, déduit de l'attribut `[Required]` de la propriété liée.
`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`	`List<string>`	`null`	`LgInputBase`	Valeur liée (`@bind-Value`).
`ValueChanged`	`EventCallback<List<string>>`	—	`LgInputBase`	Callback de mise à jour de la valeur liée.
`ValueExpression`	`Expression<Func<List<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

LgTagBox 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<List<string>>, Task>`	Avant le changement de la liste ; `args.Cancel = true` annule le changement.
`OnChange`	`EventCallback<ChangeEventArgs>`	Après le changement de la liste.
`OnReset`	`EventCallback<ChangeEventArgs>`	À la réinitialisation par le bouton d'effacement.

Bonnes pratiques / accessibilité

Initialisez la propriété liée avec une liste vide plutôt que null pour simplifier le code de traitement.
Pour proposer des valeurs pendant la saisie plutôt qu'une saisie libre, préférez LgSuggestBox ou LgSelect en sélection multiple.

Référence complète

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

Composants liés

LgTextBox — saisie de texte (masques de saisie identiques).
LgSuggestBox — saisie avec suggestions.
LgGridTagBoxColumn — colonne d'étiquettes d'un LgGridView.

Utilisation​

Démonstration​

Saisie simple​

Limites et doublons​

Touches de validation et séparateur​

Masque de saisie​

Réagir au changement de valeur​

Propriétés​

Événements​

Bonnes pratiques / accessibilité​

Composants liés​