LgLabelAction

LgLabelAction affiche une valeur (en lecture) accompagnée d'un libellé et d'un bouton d'action. C'est un composant léger, utile pour présenter une information avec une action contextuelle (copier, éditer, ouvrir…).

<LgLabelAction Label="Référence"
               Value="@Model.Reference"
               ButtonIconName="@IconNames.All.ClipboardPlus"
               OnClick="OnCopyAsync" />

Espace de noms : Lagoon.UI.Components
Hérite de : LgComponentBase
Package NuGet : Lagoon.UI

Utilisation

Affichage simple avec action

LgLabelAction convient lorsqu'une valeur en lecture doit être accompagnée d'une action contextuelle. Le clic du bouton remonte un ActionEventArgs, comme pour LgButton.

CustomerPage.razor
<LgLabelAction Label="#CustomerIdentifier"
               Value="@Model.Identifier"
               ButtonText="#Copy"
               ButtonIconName="@IconNames.All.ClipboardPlus"
               OnClick="CopyIdentifierAsync" />

CustomerPage.razor.cs
public partial class CustomerPage : LgPage
{
    // Données affichées par le label : l'action porte sur cette valeur en lecture seule.
    private CustomerVm Model { get; } = new() { Identifier = "CUST-00042" };

    // Copie l'identifiant présenté : utile pour réutiliser rapidement une référence métier.
    private Task CopyIdentifierAsync(ActionEventArgs args)
    {
        ShowSuccess("#CustomerIdentifierCopied");
        return Task.CompletedTask;
    }

    private sealed class CustomerVm
    {
        public string Identifier { get; set; }
    }
}

Style du bouton et bulle d'aide

Le bouton interne reprend ButtonKind, ButtonText, ButtonIconName et Disabled. Le tooltip est porté par le libellé, ce qui aide à expliquer la valeur affichée.

CustomerStatusPage.razor
<LgLabelAction Label="#CustomerStatus"
               Value="@Model.Status"
               Tooltip="#CustomerStatusTooltip"
               ButtonKind="ButtonKind.Secondary"
               ButtonText="#Edit"
               ButtonIconName="@IconNames.Edit"
               OnClick="EditStatusAsync" />

CustomerStatusPage.razor.cs
public partial class CustomerStatusPage : LgPage
{
    // Statut courant affiché en lecture : le bouton ouvre l'action de modification associée.
    private CustomerVm Model { get; } = new() { Status = "#CustomerStatusActive" };

    // Lance l'édition du statut sans transformer le label en champ de saisie permanent.
    private Task EditStatusAsync(ActionEventArgs args)
    {
        ShowInformation("#CustomerStatusEditionOpened");
        return Task.CompletedTask;
    }

    private sealed class CustomerVm
    {
        public string Status { get; set; }
    }
}

Valeur multi-lignes

MultiLine="true" place le bouton avant la valeur et affiche celle-ci sur plusieurs lignes. Ce mode est adapté aux commentaires, descriptions ou messages longs.

CustomerCommentPage.razor
<LgLabelAction Label="#Comment"
               Value="@Model.Comment"
               MultiLine="true"
               ButtonKind="ButtonKind.Ghost"
               ButtonIconName="@IconNames.Edit"
               OnClick="EditCommentAsync" />

CustomerCommentPage.razor.cs
public partial class CustomerCommentPage : LgPage
{
    // Commentaire affiché sur plusieurs lignes pour rester lisible sans ouvrir un formulaire complet.
    private CustomerVm Model { get; } = new() { Comment = "#CustomerCommentPreview" };

    // Ouvre l'édition du commentaire uniquement lorsque l'utilisateur demande la modification.
    private Task EditCommentAsync(ActionEventArgs args)
    {
        ShowInformation("#CommentEditionOpened");
        return Task.CompletedTask;
    }

    private sealed class CustomerVm
    {
        public string Comment { get; set; }
    }
}

Action désactivée

Disabled désactive le bouton d'action tout en conservant la valeur affichée. Utilisez ce mode pour signaler qu'une information reste consultable mais que l'action n'est pas autorisée dans l'état courant.

CustomerLockedPage.razor
<LgLabelAction Label="#CustomerIdentifier"
               Value="@Model.Identifier"
               ButtonText="#Edit"
               ButtonIconName="@IconNames.Edit"
               Disabled="@IsLocked"
               OnClick="EditIdentifierAsync" />

CustomerLockedPage.razor.cs
public partial class CustomerLockedPage : LgPage
{
    // Verrou métier : la valeur reste visible, mais l'action contextuelle est neutralisée.
    private bool IsLocked { get; set; } = true;

    // Données affichées par le label, indépendantes de l'état activé du bouton.
    private CustomerVm Model { get; } = new() { Identifier = "CUST-00042" };

    // Exécuté uniquement lorsque le bouton n'est pas désactivé.
    private Task EditIdentifierAsync(ActionEventArgs args)
    {
        ShowInformation("#CustomerIdentifierEditionOpened");
        return Task.CompletedTask;
    }

    private sealed class CustomerVm
    {
        public string Identifier { get; set; }
    }
}

astuce

Le composant affiche toujours une valeur en lecture. Utilisez Disabled pour neutraliser uniquement le bouton d'action lorsque l'information reste consultable.

Propriétés

Nom	Type	Défaut	Déclaré dans	Description
`Value`	`string`	`null`	`LgLabelAction`	Valeur affichée.
`Label`	`string`	`""`	`LgLabelAction`	Libellé associé à la valeur.
`CssClass`	`string`	`null`	`LgLabelAction`	Classes CSS additionnelles.
`Tooltip`	`string`	`null`	`LgLabelAction`	Bulle d'aide.
`TooltipIsHtml`	`bool`	`false`	`LgLabelAction`	Indique si le contenu du `Tooltip` est au format HTML (sinon texte brut).
`ButtonKind`	`ButtonKind`	`ButtonKind.Primary`	`LgLabelAction`	Style du bouton d'action.
`ButtonText`	`string`	`""`	`LgLabelAction`	Libellé du bouton d'action.
`ButtonIconName`	`string`	`null`	`LgLabelAction`	Icône du bouton d'action (`IconNames.All.*`).
`MultiLine`	`bool`	`false`	`LgLabelAction`	Affiche la valeur sur plusieurs lignes.
`Disabled`	`bool`	`false`	`LgLabelAction`	Désactive le bouton d'action.
`OnClick`	`EventCallback<ActionEventArgs>`	—	`LgLabelAction`	Callback déclenché au clic sur le bouton d'action.

Événements

Événement	Type	Description
`OnClick`	`EventCallback<ActionEventArgs>`	Déclenché lors du clic sur le bouton d'action.

Énumérations associées

Voir ButtonKind sur la page LgButton.

Composants liés

LgButton — le bouton autonome.

Utilisation​

Affichage simple avec action​

Style du bouton et bulle d'aide​

Valeur multi-lignes​

Action désactivée​

Propriétés​

Événements​

Énumérations associées​

Composants liés​