LgToolbarGroup

LgToolbarGroup regroupe plusieurs éléments d'une LgToolbar dans un conteneur btn-group. Il applique un style de groupe (ToolbarGroupKind) et fournit un regroupement sémantique aux boutons qu'il contient.

<LgToolbarGroup>
    <LgToolbarButton Text="Item 1" />
    <LgToolbarButton Text="Item 2" />
</LgToolbarGroup>

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

Style hérité

Si Kind n'est pas défini, le groupe reprend GroupKind depuis la LgToolbar parente.

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Regrouper des actions liées

LgToolbarGroup crée un groupe visuel et sémantique (role="group") pour des boutons qui appartiennent au même contexte fonctionnel.

OrdersPage.razor

@inherits LgPage

<LgToolbar>
    <LgToolbarGroup>
        <LgToolbarButton Text="#Previous" IconName="@IconNames.All.ArrowLeftShort" OnClick="PreviousAsync" />
        <LgToolbarButton Text="#Next" IconName="@IconNames.All.ArrowRightShort" OnClick="NextAsync" />
    </LgToolbarGroup>

    <LgToolbarGroup CssClass="ml-2">
        <LgToolbarButton Text="#Refresh" IconName="@IconNames.All.ArrowRepeat" OnClick="RefreshAsync" />
    </LgToolbarGroup>
</LgToolbar>

OrdersPage.razor.cs

public partial class OrdersPage : LgPage
{
    // Affiche l'élément précédent dans une navigation locale entre enregistrements.
    private Task PreviousAsync(ActionEventArgs args)
    {
        return Task.CompletedTask;
    }

    // Affiche l'élément suivant sans changer la structure de la toolbar.
    private Task NextAsync(ActionEventArgs args)
    {
        return Task.CompletedTask;
    }

    // Recharge le contenu courant ; isolé dans un groupe séparé car l'action n'est pas de la navigation.
    private Task RefreshAsync(ActionEventArgs args)
    {
        return Task.CompletedTask;
    }
}

Hériter ou surcharger GroupKind

Si Kind n'est pas défini, le groupe reprend GroupKind de la toolbar parente. Définissez Kind localement pour mettre en évidence un groupe particulier.

OrdersPage.razor

@inherits LgPage

<LgToolbar GroupKind="ToolbarGroupKind.Secondary">
    <LgToolbarGroup>
        <LgToolbarButton Text="#Edit" IconName="@IconNames.Edit" />
        <LgToolbarButton Text="#Duplicate" IconName="@IconNames.All.Files" />
    </LgToolbarGroup>

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

Source du style	Quand l'utiliser
LgToolbar.GroupKind	Pour donner le même style à tous les groupes d'une toolbar.
LgToolbarGroup.Kind	Pour distinguer un groupe d'actions critiques ou principales.
CssClass	Pour ajouter un espacement ou une classe projet sans modifier le style Lagoon.

Placer un menu dans un groupe

Un groupe peut contenir un LgToolbarMenu au même titre qu'un bouton. C'est le bon emplacement pour des actions secondaires liées à un bouton principal.

OrdersPage.razor

@inherits LgPage

<LgToolbar GroupKind="ToolbarGroupKind.Primary">
    <LgToolbarGroup>
        <LgToolbarButton Text="#New" IconName="@IconNames.Add" Kind="ButtonKind.Primary" OnClick="CreateAsync" />
        <LgToolbarMenu Text="#MoreActions" IconName="@IconNames.All.ThreeDotsVertical">
            <LgToolbarButton Text="#Import" IconName="@IconNames.All.Upload" CommandName="import" />
            <LgToolbarButton Text="#Export" IconName="@IconNames.All.Download" CommandName="export" />
        </LgToolbarMenu>
    </LgToolbarGroup>
</LgToolbar>

Cohérence

Évitez de mélanger dans un même LgToolbarGroup des actions sans relation métier. Les lecteurs d'écran annoncent le groupe, mais les libellés accessibles restent portés par les boutons et menus enfants.

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
ChildContent	RenderFragment	null	LgToolbarGroup	Contenu du groupe de toolbar.
CssClass	string	null	LgToolbarGroup	Classes CSS additionnelles ajoutées au conteneur racine du groupe.
Kind	ToolbarGroupKind?	Toolbar.GroupKind	LgToolbarGroup	Style du groupe. Si le paramètre est omis, OnInitialized reprend GroupKind depuis la toolbar parente.

Paramètres en cascade

LgToolbarGroup consomme Toolbar (LgToolbar) pour récupérer la valeur par défaut GroupKind. Il fournit aussi sa propre instance en cascade à ses enfants.

Événements

Aucun EventCallback public n'est défini par LgToolbarGroup ou sa classe de base.

Énumérations associées

ToolbarGroupKind

Style visuel du groupe 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="group".
• Regroupez uniquement des actions liées afin que la structure soit cohérente pour les technologies d'assistance.
• Les libellés accessibles restent portés par les boutons ou menus enfants.

Composants liés

• LgToolbar — conteneur parent de la barre d'outils.
• LgToolbarButton — bouton à placer dans un groupe.
• LgToolbarMenu — menu à placer dans un groupe.
• LgCrudToolbarButton — bouton de menu avec actions CRUD secondaires.