LgCrudToolbarButton

LgCrudToolbarButton spécialise LgToolbarButton pour les menus de toolbar qui doivent proposer des actions secondaires de type renommer, enregistrer et supprimer à droite de l'entrée principale.

<LgCrudToolbarButton Text="Profil"
                     OnRename="OnRenameAsync"
                     OnSave="OnSaveAsync"
                     OnRemove="OnRemoveAsync" />

• Espace de noms : Lagoon.UI.Components
• Hérite de : LgToolbarButton → LgButton → LgAriaComponentBase → LgComponentBase
• Interfaces : ILgComponentPolicies, IActionComponent, ILgFocusableComponent
• Package NuGet : Lagoon.UI

Rendu spécialisé

Les boutons secondaires (OnRename, OnSave, OnRemove) ne sont rendus que lorsque le composant est placé dans un LgToolbarMenu et que le callback correspondant possède un gestionnaire.

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Entrée CRUD dans un menu

LgCrudToolbarButton est prévu pour être placé dans un LgToolbarMenu. L'entrée principale reste cliquable, et les boutons secondaires sont affichés à droite uniquement pour les callbacks fournis.

ProfilesPage.razor

@inherits LgPage

<LgToolbar>
    <LgToolbarGroup>
        <LgToolbarMenu Text="#Profiles" IconName="@IconNames.All.PersonLinesFill">
            <LgCrudToolbarButton Text="#DefaultProfile"
                                 IconName="@IconNames.All.Person"
                                 OnClick="OpenProfileAsync"
                                 OnRename="RenameProfileAsync"
                                 RenameButtonTooltip="#Rename"
                                 RenameButtonAria="#RenameProfile"
                                 OnSave="SaveProfileAsync"
                                 OnSaveConfirmationMessage="#ConfirmSaveProfile"
                                 SaveButtonTooltip="#Save"
                                 SaveButtonAria="#SaveProfile"
                                 OnRemove="RemoveProfileAsync"
                                 OnRemoveConfirmationMessage="#ConfirmDeleteProfile"
                                 RemoveButtonTooltip="#Delete"
                                 RemoveButtonAria="#DeleteProfile" />
        </LgToolbarMenu>
    </LgToolbarGroup>
</LgToolbar>

ProfilesPage.razor.cs

public partial class ProfilesPage : LgPage
{
    // Ouvre l'entrée principale du menu pour consulter le profil sélectionné.
    private Task OpenProfileAsync(ActionEventArgs args)
    {
        return Task.CompletedTask;
    }

    // Lance le renommage ; le bouton secondaire n'est rendu que si ce callback est défini.
    private Task RenameProfileAsync(ActionEventArgs args)
    {
        return Task.CompletedTask;
    }

    // Sauvegarde le profil après confirmation pour éviter une écriture involontaire.
    private Task SaveProfileAsync(ActionEventArgs args)
    {
        return Task.CompletedTask;
    }

    // Supprime le profil après confirmation ; l'action est séparée de l'ouverture principale.
    private Task RemoveProfileAsync(ActionEventArgs args)
    {
        return Task.CompletedTask;
    }
}

Afficher seulement les actions disponibles

Chaque bouton secondaire est conditionné par son EventCallback. Vous pouvez donc exposer uniquement les actions autorisées par le contexte métier.

ProfilesPage.razor

@inherits LgPage

<LgToolbarMenu Text="#Profiles">
    <LgCrudToolbarButton Text="#ReadOnlyProfile"
                         IconName="@IconNames.All.Eye"
                         OnClick="OpenProfileAsync" />

    <LgCrudToolbarButton Text="#EditableProfile"
                         IconName="@IconNames.Edit"
                         OnClick="OpenProfileAsync"
                         OnRename="RenameProfileAsync"
                         RenameButtonTooltip="#Rename"
                         RenameButtonAria="#RenameProfile"
                         OnSave="SaveProfileAsync"
                         SaveButtonTooltip="#Save"
                         SaveButtonAria="#SaveProfile" />
</LgToolbarMenu>

Rendu hors menu

Si LgCrudToolbarButton est placé directement dans une toolbar, il retombe sur le rendu de LgToolbarButton et n'affiche pas les actions secondaires. Utilisez-le dans LgToolbarMenu pour bénéficier de la colonne d'actions CRUD.

Combiner action principale et commande

L'action principale hérite des capacités de LgToolbarButton : OnClick, CommandName, CommandArgument, Uri et Link. Les actions secondaires restent indépendantes.

ProfilesPage.razor

@inherits LgPage

<LgToolbar OnCommand="OnToolbarCommandAsync">
    <LgToolbarGroup>
        <LgToolbarMenu Text="#Profiles">
            <LgCrudToolbarButton Text="#CurrentProfile"
                                 CommandName="open-profile"
                                 CommandArgument="@_profileId"
                                 OnRemove="RemoveProfileAsync"
                                 OnRemoveConfirmationMessage="#ConfirmDeleteProfile"
                                 RemoveButtonTooltip="#Delete"
                                 RemoveButtonAria="#DeleteProfile" />
        </LgToolbarMenu>
    </LgToolbarGroup>
</LgToolbar>

ProfilesPage.razor.cs

public partial class ProfilesPage : LgPage
{
    // Identifiant du profil sélectionné, transmis par l'entrée principale via CommandArgument.
    private int _profileId = 12;

    // Centralise l'ouverture du profil sans impacter les boutons secondaires CRUD.
    private Task OnToolbarCommandAsync(CommandEventArgs args)
    {
        if (args.CommandName == "open-profile")
        {
            args.Handled = true;
            App.NavigateTo(ProfilePage.Link((int)args.CommandArgument).Uri);
        }
        return Task.CompletedTask;
    }
}

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
OnRemove	EventCallback<ActionEventArgs>	—	LgCrudToolbarButton	Callback du bouton secondaire de suppression. Le bouton est rendu uniquement si ce callback a un gestionnaire.
OnRemoveConfirmationMessage	string	null	LgCrudToolbarButton	Message de confirmation affiché avant l'action OnRemove.
OnRename	EventCallback<ActionEventArgs>	—	LgCrudToolbarButton	Callback du bouton secondaire de renommage. Le bouton est rendu uniquement si ce callback a un gestionnaire.
OnSave	EventCallback<ActionEventArgs>	—	LgCrudToolbarButton	Callback du bouton secondaire d'enregistrement. Le bouton est rendu uniquement si ce callback a un gestionnaire.
OnSaveConfirmationMessage	string	null	LgCrudToolbarButton	Message de confirmation affiché avant l'action OnSave.
RemoveButtonAria	string	null	LgCrudToolbarButton	Libellé ARIA du bouton secondaire de suppression.
RemoveButtonTooltip	string	null	LgCrudToolbarButton	Bulle d'aide du bouton secondaire de suppression.
RenameButtonAria	string	null	LgCrudToolbarButton	Libellé ARIA du bouton secondaire de renommage.
RenameButtonTooltip	string	null	LgCrudToolbarButton	Bulle d'aide du bouton secondaire de renommage.
SaveButtonAria	string	null	LgCrudToolbarButton	Libellé ARIA du bouton secondaire d'enregistrement.
SaveButtonTooltip	string	null	LgCrudToolbarButton	Bulle d'aide du bouton secondaire d'enregistrement.
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgButton	Attributs HTML additionnels appliqués à l'élément principal rendu.
AutoFocus	bool	false	LgButton	Donne le focus au bouton principal lors du premier rendu.
ButtonSize	ButtonSize?	Toolbar.ButtonSize ou ButtonSize.Medium	LgButton	Taille du bouton principal. LgToolbarButton.OnInitialized reprend la taille de la toolbar parente, sinon Medium.
ChildContent	RenderFragment	null	LgButton	Contenu personnalisé du bouton principal.
CommandArgument	object	null	LgButton	Argument associé à la commande principale envoyée au gestionnaire.
CommandName	string	null	LgButton	Nom de la commande principale envoyée au gestionnaire de commandes parent (ICommandListener).
ConfirmationMessage	string	null	LgButton	Message de confirmation affiché avant l'action principale. Incompatible avec CommandName et IsSubmit.
CssClass	string	null	LgButton	Classes CSS additionnelles ajoutées à l'entrée principale.
Disabled	bool	false	LgButton	Désactive l'entrée principale.
IconName	string	null	LgButton	Icône de l'entrée principale.
IsSubmit	bool	false	LgButton	Si true, le bouton principal est de type submit et déclenche le LgEditForm parent.
Kind	ButtonKind	Toolbar.ButtonKind ou ButtonKind.Secondary	LgButton	Style de l'entrée principale. Le comportement par défaut est celui de LgToolbarButton.
Link	LgPageLink	null	LgButton	Informations de lien vers une page. Le Text et l'IconName du lien sont repris s'ils ne sont pas définis.
OnClick	EventCallback<ActionEventArgs>	—	LgButton	Callback déclenché au clic sur l'entrée principale.
PolicyEdit	string	null	LgButton	Policy requise pour activer (éditer) l'entrée principale.
PolicyVisible	string	null	LgButton	Policy requise pour afficher l'entrée principale.
PreventDefault	bool	false	LgButton	Annule le comportement par défaut de l'événement clic. Dans un menu, le rendu force true pour l'entrée principale.
PreventDoubleClick	bool	true	LgButton	Désactive le bouton pendant l'exécution de l'action principale pour empêcher le double-clic.
ShortcutKey	string	null	LgButton	Caractère du raccourci clavier de l'action principale. Associé à Ctrl, ou à Alt si préfixé par @.
StopPropagation	bool	true	LgButton	Stoppe la propagation de l'événement clic de l'action principale. Dans un menu, le rendu force true.
Target	string	null	LgButton	Nom de la fenêtre du navigateur dans laquelle ouvrir l'Uri.
Text	string	null	LgButton	Libellé de l'entrée principale.
Tooltip	string	null	LgButton	Bulle d'aide de l'entrée principale.
TooltipIsHtml	bool	false	LgButton	Indique si le contenu du Tooltip est au format HTML (sinon texte brut).
TooltipPosition	TooltipPosition	TooltipPosition.Bottom	LgButton	Position de la bulle d'aide. Le constructeur de LgToolbarButton définit Bottom.
Uri	string	null	LgButton	URI / route à ouvrir au clic sur l'entrée principale.
AriaLabel	string	null	LgAriaComponentBase	Valeur de l'attribut aria-label de l'entrée principale.
AriaLabelledBy	string	null	LgAriaComponentBase	Valeur de l'attribut aria-labelledby de l'entrée principale.

Paramètres en cascade

LgCrudToolbarButton hérite des paramètres en cascade de LgToolbarButton : Toolbar (LgToolbar), ToolbarMenuParent (LgToolbarMenu), ainsi que les paramètres en cascade hérités de LgButton (ParentAuthorizeView, EditForm, ButtonSizeCascading, ParentCommandListener).

Événements

Événement	Type	Description
OnClick	EventCallback<ActionEventArgs>	Action principale héritée de LgButton.
OnRename	EventCallback<ActionEventArgs>	Action du bouton secondaire de renommage.
OnSave	EventCallback<ActionEventArgs>	Action du bouton secondaire d'enregistrement.
OnRemove	EventCallback<ActionEventArgs>	Action du bouton secondaire de suppression.

Énumérations associées

ButtonKind

Style visuel de l'entrée principale.

Valeur	Description
Primary	Style principal.
Secondary	Style secondaire (valeur par défaut hors toolbar personnalisée).
Success	Style « succès ».
Error	Style « erreur » (danger).
Warning	Style « avertissement ».
Info	Style « information ».
Link	Apparence de lien.
Ghost	Style « ghost » (fond transparent).
Custom	Style personnalisé (aucune classe de variante imposée).

ButtonSize

Valeur	Description
Medium	Taille standard (valeur par défaut hors toolbar personnalisée).
Small	Taille réduite.
Large	Grande taille.

TooltipPosition

Valeur	Description
None	Position indéfinie.
Top	Au-dessus.
Right	À droite.
Bottom	En dessous (valeur définie par LgToolbarButton).
Left	À gauche.

Accessibilité

• Renseignez SaveButtonAria, RemoveButtonAria et RenameButtonAria lorsque les boutons secondaires sont affichés.
• L'entrée principale conserve role="menuitem" lorsqu'elle est dans un menu.
• Les boutons secondaires utilisent des icônes (PencilFill, Save2Fill, IconNames.Delete) ; leurs tooltips et libellés ARIA doivent donc être explicites.

Composants liés

• LgToolbar — conteneur parent de la barre d'outils.
• LgToolbarButton — classe de base directe.
• LgToolbarMenu — contexte de rendu prévu pour les actions secondaires.
• LgToolbarGroup — groupe de boutons.
• LgButton — bouton de base.