LgToolbarMenu

LgToolbarMenu ajoute un menu déroulant à une LgToolbar. Il rend un bouton LgButton de type dropdown et affiche son ChildContent dans un conteneur dropdown-menu.

<LgToolbarMenu Text="Dropdown avec groupe">
    <LgToolbarButton Text="Item 1" />
</LgToolbarMenu>

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

Contenu attendu

Placez principalement des LgToolbarButton dans le menu. Les boutons détectent automatiquement le menu parent et adaptent leur rendu en élément dropdown-item.

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Menu simple avec entrées, titre et séparateur

LgToolbarMenu ouvre un dropdown-menu. Son contenu doit rester plat : utilisez des LgToolbarButton, LgToolbarMenuItemTitle et LgToolbarMenuItemSeparator.

OrdersPage.razor

@inherits LgPage

<LgToolbar>
    <LgToolbarGroup>
        <LgToolbarMenu Text="#MoreActions" IconName="@IconNames.All.GearFill">
            <LgToolbarMenuItemTitle Text="#Documents" />
            <LgToolbarButton Text="#Import" IconName="@IconNames.All.Upload" OnClick="ImportAsync" />
            <LgToolbarButton Text="#Export" IconName="@IconNames.All.Download" OnClick="ExportAsync" />
            <LgToolbarMenuItemSeparator />
            <LgToolbarButton Text="#Delete" IconName="@IconNames.Delete" Kind="ButtonKind.Error" OnClick="DeleteAsync" />
        </LgToolbarMenu>
    </LgToolbarGroup>
</LgToolbar>

OrdersPage.razor.cs

public partial class OrdersPage : LgPage
{
    // Lance un import depuis le menu d'actions secondaires.
    private Task ImportAsync(ActionEventArgs args)
    {
        return Task.CompletedTask;
    }

    // Lance un export depuis le même menu pour regrouper les actions documentaires.
    private Task ExportAsync(ActionEventArgs args)
    {
        return Task.CompletedTask;
    }

    // Exécute une action destructive placée après un séparateur pour la distinguer visuellement.
    private Task DeleteAsync(ActionEventArgs args)
    {
        return Task.CompletedTask;
    }
}

Naviguer vers des pages Lagoon

Les entrées de menu étant des LgToolbarButton, elles peuvent recevoir un Link typé. Le titre et l'icône proviennent alors de la page.

OrdersPage.razor

@inherits LgPage

<LgToolbar>
    <LgToolbarGroup>
        <LgToolbarMenu Text="#OpenPage" IconName="@IconNames.All.BoxArrowUpRight">
            <LgToolbarButton Link="@DashboardPage.Link()" />
            <LgToolbarButton Link="@ReportsPage.Link()" Target="_blank" Text="#OpenReportInNewTab" />
        </LgToolbarMenu>
    </LgToolbarGroup>
</LgToolbar>

Personnaliser le bouton d'ouverture

Kind, IconName, Text, AriaLabel et CssClass concernent le bouton qui ouvre le menu. Les boutons placés dans le menu gardent leurs propres paramètres.

OrdersPage.razor

@inherits LgPage

<LgToolbar ButtonSize="ButtonSize.Small">
    <LgToolbarGroup>
        <LgToolbarMenu Text="#Actions"
                       IconName="@IconNames.All.ThreeDotsVertical"
                       Kind="ButtonKind.Primary"
                       CssClass="ml-2"
                       AriaLabel="#AvailableActions">
            <LgToolbarButton Text="#Validate" IconName="@IconNames.All.Check2Circle" Kind="ButtonKind.Success" />
            <LgToolbarButton Text="#Reject" IconName="@IconNames.All.XCircle" Kind="ButtonKind.Error" />
        </LgToolbarMenu>
    </LgToolbarGroup>
</LgToolbar>

Taille du menu

Le bouton d'ouverture lit Toolbar.ButtonSize.Value. Placez donc LgToolbarMenu dans une LgToolbar pour bénéficier de la taille configurée par l'application ou par le paramètre ButtonSize.

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	LgToolbarMenu	Contenu affiché dans le dropdown-menu.
CssClass	string	null	LgToolbarMenu	Classes CSS additionnelles ajoutées au conteneur btn-group.
IconName	string	null	LgToolbarMenu	Icône du bouton qui ouvre le menu.
Kind	ButtonKind	ButtonKind.Secondary	LgToolbarMenu	Style du bouton qui ouvre le menu.
Text	string	null	LgToolbarMenu	Libellé du bouton qui ouvre le menu. La valeur est traduite avec CheckTranslate().
AriaLabel	string	null	LgAriaComponentBase	Valeur de l'attribut aria-label transmise au bouton de menu après traduction.
AriaLabelledBy	string	null	LgAriaComponentBase	Valeur de l'attribut aria-labelledby transmise au bouton de menu.

Paramètres en cascade

LgToolbarMenu consomme Toolbar (LgToolbar) pour lire Toolbar.ButtonSize.Value et dimensionner le bouton dropdown. Il fournit aussi sa propre instance en cascade aux boutons du menu.

Événements

Aucun EventCallback public n'est défini par LgToolbarMenu ou ses classes de base.

Énumérations associées

ButtonKind

Style visuel du bouton qui ouvre le menu.

Valeur	Description
Primary	Style principal.
Secondary	Style secondaire (valeur par défaut).
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).

Accessibilité

• Le bouton d'ouverture reçoit aria-haspopup="true", aria-expanded="false" et role="menuitem".
• Utilisez AriaLabel ou AriaLabelledBy si le bouton de menu est identifié uniquement par une icône.
• Les entrées placées dans ChildContent doivent porter leurs propres libellés accessibles.

Composants liés

• LgToolbar — conteneur parent de la barre d'outils.
• LgToolbarGroup — groupe qui contient généralement le menu.
• LgToolbarButton — entrée de menu ou bouton de toolbar.
• LgCrudToolbarButton — entrée de menu avec actions CRUD secondaires.