LgToolbarButton

LgToolbarButton est la variante de LgButton adaptée aux barres d'outils Lagoon. Placé directement dans une toolbar, il se rend comme un bouton ; placé dans un LgToolbarMenu, il se rend comme un élément de menu.

<LgToolbarButton Text="Item 1" IconName="@IconNames.All.GearFill" />

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

Comportement dans un menu

Lorsque le bouton est placé dans LgToolbarMenu, le rendu devient un lien de menu (role="menuitem") et les attributs de clic sont forcés avec preventDefault et stopPropagation.

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Bouton dans une toolbar

Placé dans un LgToolbarGroup, LgToolbarButton se comporte comme un LgButton adapté à la toolbar. Il récupère la taille et le style par défaut de la LgToolbar parente, sauf si ButtonSize ou Kind sont renseignés sur le bouton.

OrdersPage.razor

@inherits LgPage

<LgToolbar ButtonKind="ButtonKind.Secondary" ButtonSize="ButtonSize.Small">
    <LgToolbarGroup>
        <LgToolbarButton Text="#Refresh" IconName="@IconNames.All.ArrowRepeat" OnClick="RefreshAsync" />
        <LgToolbarButton Text="#Save" IconName="@IconNames.Save" Kind="ButtonKind.Primary" OnClick="SaveAsync" />
        <LgToolbarButton Text="#Delete"
                         IconName="@IconNames.Delete"
                         Kind="ButtonKind.Error"
                         ConfirmationMessage="#ConfirmDelete"
                         OnClick="DeleteAsync" />
    </LgToolbarGroup>
</LgToolbar>

OrdersPage.razor.cs

public partial class OrdersPage : LgPage
{
    // Recharge les données depuis la toolbar sans quitter la page courante.
    private Task RefreshAsync(ActionEventArgs args)
    {
        return Task.CompletedTask;
    }

    // Sauvegarde l'élément courant ; le bouton principal force ici le style primaire.
    private Task SaveAsync(ActionEventArgs args)
    {
        return Task.CompletedTask;
    }

    // Supprime l'élément après confirmation utilisateur pour éviter les suppressions accidentelles.
    private Task DeleteAsync(ActionEventArgs args)
    {
        return Task.CompletedTask;
    }
}

Bouton rendu dans un menu

Dans un LgToolbarMenu, le même composant est rendu en entrée de menu (role="menuitem"). Le rendu force preventDefault et stopPropagation pour garder le comportement du menu déroulant.

OrdersPage.razor

@inherits LgPage

<LgToolbar>
    <LgToolbarGroup>
        <LgToolbarMenu Text="#MoreActions" IconName="@IconNames.All.GearFill">
            <LgToolbarButton Text="#Duplicate" IconName="@IconNames.All.Files" OnClick="DuplicateAsync" />
            <LgToolbarButton Text="#Archive" IconName="@IconNames.All.Archive" CommandName="archive" />
            <LgToolbarMenuItemSeparator />
            <LgToolbarButton Text="#Delete" IconName="@IconNames.Delete" Kind="ButtonKind.Error" OnClick="DeleteAsync" />
        </LgToolbarMenu>
    </LgToolbarGroup>
</LgToolbar>

Navigation typée avec Link

Link reprend l'URI, le titre et l'icône d'un LgPageLink. C'est le mode conseillé pour naviguer vers une page Lagoon sans dupliquer la route.

OrdersPage.razor

@inherits LgPage

<LgToolbar>
    <LgToolbarGroup>
        <LgToolbarButton Link="@CustomersPage.Link()" />
        <LgToolbarButton Link="@ReportsPage.Link()" Target="_blank" Text="#OpenReportInNewTab" />
    </LgToolbarGroup>
</LgToolbar>

Priorité des valeurs

Si Text ou IconName sont fournis sur le bouton, ils remplacent les valeurs issues de Link. L'URI vient de Uri si elle est renseignée, sinon de Link.Uri.

Commande relayée à la toolbar

Utilisez CommandName pour éviter de déclarer un handler sur chaque bouton. CommandArgument peut transporter l'identifiant métier ou le filtre courant.

OrdersPage.razor

@inherits LgPage

<LgToolbar OnCommand="OnToolbarCommandAsync">
    <LgToolbarGroup>
        <LgToolbarButton Text="#Open" CommandName="open" CommandArgument="@_selectedOrderId" />
        <LgToolbarButton Text="#Export" CommandName="export" ShortcutKey="e" Tooltip="#ExportShortcut" />
    </LgToolbarGroup>
</LgToolbar>

OrdersPage.razor.cs

public partial class OrdersPage : LgPage
{
    // Identifiant de la ligne courante transmis par CommandArgument aux actions centralisées.
    private int _selectedOrderId = 42;

    // Traite les commandes émises par les boutons et marque les commandes consommées.
    private Task OnToolbarCommandAsync(CommandEventArgs args)
    {
        if (args.CommandName == "open")
        {
            args.Handled = true;
            App.NavigateTo(OrderDetailPage.Link((int)args.CommandArgument).Uri);
        }
        return Task.CompletedTask;
    }
}

Combinaisons à éviter

Comme pour LgButton, ConfirmationMessage ne doit pas être combiné avec CommandName ni avec IsSubmit. Pour une action confirmée, utilisez plutôt OnClick.

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
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgButton	Attributs HTML additionnels appliqués à l'élément rendu (capture des valeurs non mappées).
AutoFocus	bool	false	LgButton	Donne le focus au bouton lors du premier rendu.
ButtonSize	ButtonSize?	Toolbar.ButtonSize ou ButtonSize.Medium	LgButton	Taille du bouton. LgToolbarButton.OnInitialized reprend la taille de la toolbar parente, sinon Medium.
ChildContent	RenderFragment	null	LgButton	Contenu personnalisé du bouton.
CommandArgument	object	null	LgButton	Argument associé à la commande envoyée au gestionnaire. Utilisez des types primitifs ou string pour optimiser le rendu.
CommandName	string	null	LgButton	Nom de la commande envoyée au gestionnaire de commandes parent (ICommandListener).
ConfirmationMessage	string	null	LgButton	Message de confirmation affiché avant l'action. Incompatible avec CommandName et IsSubmit.
CssClass	string	null	LgButton	Classes CSS additionnelles. Dans un menu, elles sont ajoutées à l'élément dropdown-item d-flex.
Disabled	bool	false	LgButton	Désactive le bouton.
IconName	string	null	LgButton	Icône affichée. S'utilise via IconName="@IconNames.All.MyIcon".
IsSubmit	bool	false	LgButton	Si true, le bouton est de type submit et déclenche le LgEditForm parent.
Kind	ButtonKind	Toolbar.ButtonKind ou ButtonKind.Secondary	LgButton	Style du bouton. Le constructeur initialise une valeur sentinelle, puis OnInitialized reprend la valeur de la toolbar ou Secondary.
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 le bouton.
PolicyEdit	string	null	LgButton	Policy requise pour activer (éditer) le bouton.
PolicyVisible	string	null	LgButton	Policy requise pour afficher le bouton.
PreventDefault	bool	false	LgButton	Annule le comportement par défaut de l'événement clic (@onclick:preventDefault). Dans un menu, le rendu force true.
PreventDoubleClick	bool	true	LgButton	Désactive le bouton pendant l'exécution de l'action pour empêcher le double-clic.
ShortcutKey	string	null	LgButton	Caractère du raccourci clavier. Associé à Ctrl, ou à Alt si préfixé par @.
StopPropagation	bool	true	LgButton	Stoppe la propagation de l'événement clic (@onclick:stopPropagation). 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é du bouton ou de l'entrée de menu.
Tooltip	string	null	LgButton	Bulle d'aide.
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. Dans un menu, l'attribut href vaut # si l'URI est vide.
AriaLabel	string	null	LgAriaComponentBase	Valeur de l'attribut aria-label (traduite par GetTranslatedAriaLabel).
AriaLabelledBy	string	null	LgAriaComponentBase	Valeur de l'attribut aria-labelledby.

Paramètres en cascade

LgToolbarButton consomme Toolbar (LgToolbar) pour récupérer les valeurs par défaut, ToolbarMenuParent (LgToolbarMenu) pour adapter son rendu en menu, et les paramètres en cascade hérités de LgButton : ParentAuthorizeView, EditForm, ButtonSizeCascading et ParentCommandListener.

Événements

Événement	Type	Description
OnClick	EventCallback<ActionEventArgs>	Déclenché lors du clic (ou du raccourci clavier). ActionEventArgs expose notamment un CancellationToken lorsque l'action est exécutée dans un WaitingContext.

Énumérations associées

ButtonKind

Style visuel du bouton.

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é

• Dans un menu, le composant rend role="menuitem" et conserve tabindex="0".
• Renseignez AriaLabel ou AriaLabelledBy lorsque le bouton n'affiche qu'une icône.
• Text reste le libellé le plus simple pour rendre l'action compréhensible aux utilisateurs et aux technologies d'assistance.

Composants liés

• LgToolbar — conteneur de barre d'outils.
• LgToolbarGroup — groupe de boutons.
• LgToolbarMenu — menu déroulant de toolbar.
• LgCrudToolbarButton — variante avec actions CRUD secondaires.
• LgButton — bouton de base.