LgToolbar

LgToolbar est le conteneur de barre d'outils Lagoon. Il organise des boutons, des groupes et des menus, diffuse ses valeurs par défaut à ses enfants et peut centraliser les commandes émises par les composants d'action.

<LgToolbar>
    <LgToolbarGroup>
        <LgToolbarButton Text="Action" />
    </LgToolbarGroup>
</LgToolbar>

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

Valeurs diffusées

ButtonKind, ButtonSize et GroupKind servent de valeurs par défaut pour les composants placés dans la barre d'outils, notamment LgToolbarButton et LgToolbarGroup.

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Une toolbar peut contenir directement des boutons, des groupes et des menus. Le menu accepte un seul niveau de sous-menu : placez-y des LgToolbarButton, des séparateurs et des titres de section, mais pas un autre LgToolbarMenu.

OrdersPage.razor
@inherits LgPage

<LgToolbar CssClass="mb-3">
    <LgToolbarGroup>
        <LgToolbarButton Text="#Refresh" IconName="@IconNames.All.ArrowRepeat" OnClick="RefreshAsync" />
        <LgToolbarButton Text="#Export" IconName="@IconNames.All.Download" CommandName="export" />
    </LgToolbarGroup>

    <LgToolbarGroup>
        <LgToolbarMenu Text="#MoreActions" IconName="@IconNames.All.GearFill">
            <LgToolbarMenuItemTitle Text="#Navigation" />
            <LgToolbarButton Link="@DashboardPage.Link()" />
            <LgToolbarButton Link="@ReportsPage.Link()" />
            <LgToolbarMenuItemSeparator />
            <LgToolbarButton Text="#Archive" IconName="@IconNames.All.Archive" CommandName="archive" />
        </LgToolbarMenu>
    </LgToolbarGroup>

    <LgToolbarButton Text="#Help" IconName="@IconNames.All.QuestionCircle" Uri="help/orders" />
</LgToolbar>

Organisation

Regroupez les actions liées dans un LgToolbarGroup pour obtenir un rendu btn-group cohérent. Les boutons ou menus placés directement dans LgToolbar restent possibles pour des actions isolées.

Diffuser les styles aux enfants

ButtonKind, ButtonSize et GroupKind définis sur LgToolbar servent de valeurs par défaut. Chaque enfant peut néanmoins les surcharger localement.

OrdersPage.razor
@inherits LgPage

<LgToolbar ButtonKind="ButtonKind.Ghost"
           ButtonSize="ButtonSize.Small"
           GroupKind="ToolbarGroupKind.Secondary">
    <LgToolbarGroup>
        <LgToolbarButton Text="#Edit" IconName="@IconNames.Edit" />
        <LgToolbarButton Text="#Delete" IconName="@IconNames.Delete" Kind="ButtonKind.Error" />
    </LgToolbarGroup>

    <LgToolbarGroup Kind="ToolbarGroupKind.Primary" CssClass="ml-2">
        <LgToolbarButton Text="#Save" IconName="@IconNames.Save" Kind="ButtonKind.Primary" />
    </LgToolbarGroup>
</LgToolbar>

Valeur définie sur `LgToolbar`	Reprise par défaut par	Surcharge locale
`ButtonKind`	`LgToolbarButton`	`Kind` sur le bouton.
`ButtonSize`	`LgToolbarButton` et bouton d'ouverture de `LgToolbarMenu`	`ButtonSize` sur le bouton.
`GroupKind`	`LgToolbarGroup`	`Kind` sur le groupe.

Centraliser les commandes

OnCommand permet de traiter au même endroit les boutons qui déclarent CommandName. Si args.Handled reste à false, la commande peut remonter vers un ICommandListener parent.

OrdersPage.razor
@inherits LgPage

<LgToolbar OnCommand="OnToolbarCommandAsync">
    <LgToolbarGroup>
        <LgToolbarButton Text="#Refresh" IconName="@IconNames.All.ArrowRepeat" CommandName="refresh" />
        <LgToolbarButton Text="#Export" IconName="@IconNames.All.Download" CommandName="export" CommandArgument="@_currentFilter" />
    </LgToolbarGroup>
</LgToolbar>

OrdersPage.razor.cs
public partial class OrdersPage : LgPage
{
    // Filtre courant transmis aux commandes pour exporter ou rafraîchir la même vue que celle affichée.
    private string _currentFilter = "open";

    // Point d'entrée unique des commandes de la toolbar ; utile pour éviter un handler par bouton.
    private async Task OnToolbarCommandAsync(CommandEventArgs args)
    {
        try
        {
            if (args.CommandName == "refresh")
            {
                args.Handled = true;
                await RefreshAsync(args.CancellationToken);
            }
            else if (args.CommandName == "export")
            {
                args.Handled = true;
                await ExportAsync((string)args.CommandArgument, args.CancellationToken);
            }
        }
        catch (Exception ex)
        {
            ShowException(ex);
        }
    }

    // Recharge les données affichées par la page en réutilisant le token d'annulation de l'action.
    private Task RefreshAsync(CancellationToken cancellationToken)
    {
        return Task.CompletedTask;
    }

    // Lance l'export correspondant au filtre actif afin de conserver le contexte utilisateur.
    private Task ExportAsync(string filter, CancellationToken cancellationToken)
    {
        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
`ButtonKind`	`ButtonKind?`	`null`	`LgToolbar`	Style par défaut appliqué aux boutons de toolbar qui ne définissent pas leur propre `Kind`.
`ButtonSize`	`ButtonSize?`	`App.BehaviorConfiguration.ToolbarButtonSize`	`LgToolbar`	Taille par défaut des boutons de la toolbar. Si le paramètre est omis, `OnInitialized` reprend la configuration applicative.
`ChildContent`	`RenderFragment`	`null`	`LgToolbar`	Contenu de la barre d'outils.
`CssClass`	`string`	`null`	`LgToolbar`	Classes CSS additionnelles ajoutées au conteneur racine.
`GroupKind`	`ToolbarGroupKind`	`0` (aucune valeur nommée)	`LgToolbar`	Style par défaut appliqué aux groupes qui ne définissent pas leur propre `Kind`.
`OnCommand`	`EventCallback<CommandEventArgs>`	—	`LgToolbar`	Callback appelé lorsqu'une commande remonte depuis un composant enfant.

Paramètres en cascade

LgToolbar consomme ParentCommandListener (ICommandListener) pour propager les commandes non traitées vers un parent. Il fournit aussi sa propre instance en cascade à ses enfants (LgToolbarGroup, LgToolbarButton, LgToolbarMenu).

Événements

Événement	Type	Description
`OnCommand`	`EventCallback<CommandEventArgs>`	Déclenché lorsqu'un enfant émet une commande via `CommandName`. `CommandEventArgs` expose `CommandName`, `CommandArgument`, `CancellationToken` et `Handled`.

Énumérations associées

`ButtonKind`

Style visuel transmis aux boutons de la toolbar lorsqu'ils n'ont pas de Kind explicite.

Valeur	Description
`Primary`	Style principal.
`Secondary`	Style secondaire.
`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.
`Small`	Taille réduite.
`Large`	Grande taille.

`ToolbarGroupKind`

Style visuel transmis aux groupes de boutons.

Valeur	Description
`Primary`	Style principal.
`Secondary`	Style secondaire.
`Success`	Style « succès ».
`Error`	Style « erreur » (danger).
`Warning`	Style « avertissement ».
`Info`	Style « information ».
`Ghost`	Style « ghost ».

Accessibilité

Le conteneur racine est rendu avec role="menubar".
Placez les actions dans des composants enfants qui exposent leurs libellés (Text) ou leurs attributs ARIA.
Utilisez OnCommand pour centraliser les actions sans dupliquer les gestionnaires dans chaque bouton.

Composants liés

LgToolbarButton — bouton de barre d'outils.
LgToolbarGroup — groupe de boutons dans une barre d'outils.
LgToolbarMenu — menu déroulant de barre d'outils.
LgCrudToolbarButton — bouton de menu avec actions CRUD secondaires.

Utilisation​

Démonstration​

Composer une toolbar complète​

Diffuser les styles aux enfants​

Centraliser les commandes​

Propriétés​

Événements​

Énumérations associées​

ButtonKind​

ButtonSize​

ToolbarGroupKind​

Accessibilité​

Composants liés​