LgActionPanel

LgActionPanel affiche une zone horizontale combinant un contenu d'action principal à gauche et une barre d'outils à droite. Il encapsule le contenu Toolbar dans un LgToolbar configuré en style Ghost, et permet d'harmoniser la taille des boutons d'action.

<LgActionPanel>
    <ActionContent>
        <LgLabel Text="#lblPnlActionCustomTxt" />
    </ActionContent>
    <Toolbar>
        <LgToolbarButton IconName="@IconNames.Save" Text="#lblSave" />
    </Toolbar>
</LgActionPanel>

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

Barre d'outils intégrée

Le fragment Toolbar est rendu dans un LgToolbar interne avec GroupKind="ToolbarGroupKind.Ghost" et ButtonKind="ButtonKind.Ghost". Au chargement, la taille interne est initialisée depuis la configuration applicative ActionPanelToolbarButtonSize uniquement lorsque ToolbarButtonSize vaut null.

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Panneau avec libellé et boutons

Placez le contenu informatif dans ActionContent (à gauche) et les actions dans Toolbar (à droite). Le fragment Toolbar est rendu dans une barre interne : utilisez des LgToolbarGroup et LgToolbarButton pour conserver les styles Lagoon.

SelectionActionPage.razor

<LgActionPanel CssClass="list-view-selectionbar" ToolbarButtonSize="ButtonSize.Large">
    <ActionContent>
        <LgLabel CssClass="my-auto" Text="#SelectedItems" />
    </ActionContent>

    <Toolbar>
        <LgToolbarGroup Kind="ToolbarGroupKind.Primary">
            <LgToolbarButton IconName="@IconNames.Save"
                             OnClick="SaveSelectionAsync"
                             Text="#Save"
                             Kind="ButtonKind.Ghost" />
            <LgToolbarButton IconName="@IconNames.Delete"
                             OnClick="DeleteSelectionAsync"
                             Text="#Delete"
                             Kind="ButtonKind.Ghost" />
        </LgToolbarGroup>

        <LgToolbarGroup Kind="ToolbarGroupKind.Ghost">
            <LgToolbarButton IconName="@IconNames.Cancel"
                             OnClick="ClearSelectionAsync"
                             Text="#Cancel"
                             Kind="ButtonKind.Ghost" />
        </LgToolbarGroup>
    </Toolbar>
</LgActionPanel>

SelectionActionPage.razor.cs

public partial class SelectionActionPage : LgPage
{
    // Enregistre les éléments sélectionnés : action principale du panneau de sélection.
    private async Task SaveSelectionAsync(ActionEventArgs args)
    {
        await Task.Delay(100, args.CancellationToken);
        ShowSuccess("#SelectionSaved");
    }

    // Supprime les éléments sélectionnés : action destructive regroupée avec les actions de sélection.
    private async Task DeleteSelectionAsync(ActionEventArgs args)
    {
        await Task.Delay(100, args.CancellationToken);
        ShowSuccess("#SelectionDeleted");
    }

    // Vide la sélection courante pour masquer ou réinitialiser la barre d'actions côté page.
    private Task ClearSelectionAsync(ActionEventArgs args)
    {
        ShowInformation("#SelectionCleared");
        return Task.CompletedTask;
    }
}

Taille des boutons de la barre

ToolbarButtonSize force la taille des boutons de la toolbar interne. Laissez la valeur à null pour utiliser la configuration applicative ActionPanelToolbarButtonSize.

SelectionCompactActionPage.razor

<LgActionPanel ToolbarButtonSize="ButtonSize.Small">
    <ActionContent>
        <LgLabel Text="#SelectionActions" />
    </ActionContent>
    <Toolbar>
        <LgToolbarButton Text="#Save" IconName="@IconNames.Save" OnClick="SaveSelectionAsync" />
        <LgToolbarButton Text="#Delete" IconName="@IconNames.Delete" OnClick="DeleteSelectionAsync" />
    </Toolbar>
</LgActionPanel>

SelectionCompactActionPage.razor.cs

public partial class SelectionCompactActionPage : LgPage
{
    // Traite une action compacte lorsque l'espace disponible impose de petits boutons.
    private Task SaveSelectionAsync(ActionEventArgs args)
    {
        ShowSuccess("#SelectionSaved");
        return Task.CompletedTask;
    }

    // Supprime depuis la version compacte du panneau, sans changer le comportement métier.
    private Task DeleteSelectionAsync(ActionEventArgs args)
    {
        ShowSuccess("#SelectionDeleted");
        return Task.CompletedTask;
    }
}

État désactivé visuel

Disabled ajoute la classe CSS disabled au conteneur du panneau. Les boutons placés dans Toolbar restent des composants indépendants : définissez aussi leur propre Disabled si l'action doit être réellement neutralisée.

SelectionLockedActionPage.razor

<LgActionPanel Disabled="@IsSelectionLocked">
    <ActionContent>
        <LgLabel Text="#SelectionLocked" />
    </ActionContent>
    <Toolbar>
        <LgToolbarButton Text="#Save"
                         IconName="@IconNames.Save"
                         Disabled="@IsSelectionLocked"
                         OnClick="SaveSelectionAsync" />
    </Toolbar>
</LgActionPanel>

SelectionLockedActionPage.razor.cs

public partial class SelectionLockedActionPage : LgPage
{
    // Verrouille la sélection : le panneau et chaque action enfant reflètent le même état métier.
    private bool IsSelectionLocked { get; set; } = true;

    // Exécuté uniquement lorsque le bouton enfant n'est pas désactivé.
    private Task SaveSelectionAsync(ActionEventArgs args)
    {
        ShowSuccess("#SelectionSaved");
        return Task.CompletedTask;
    }
}

Intégration avec une liste ou une grille

Le panneau est souvent affiché lorsqu'une sélection existe dans une liste ou une grille. LgListView possède déjà son propre panneau d'actions : n'ajoutez pas un second LgActionPanel à l'intérieur de ce composant, sauf besoin de mise en page explicitement distinct.

GridSelectionPage.razor

@if (HasSelection)
{
    <LgActionPanel AriaLabel="#SelectionActions">
        <ActionContent>
            <LgLabel Text="#RowsSelected" />
        </ActionContent>
        <Toolbar>
            <LgToolbarButton Text="#Export" IconName="@IconNames.Export" OnClick="ExportSelectionAsync" />
            <LgToolbarButton Text="#Cancel" IconName="@IconNames.Cancel" OnClick="ClearSelectionAsync" />
        </Toolbar>
    </LgActionPanel>
}

GridSelectionPage.razor.cs

public partial class GridSelectionPage : LgPage
{
    // Indique si le panneau doit être visible : il disparaît dès que la sélection est vide.
    private bool HasSelection { get; set; } = true;

    // Exporte uniquement les lignes sélectionnées, ce qui justifie l'affichage contextuel du panneau.
    private Task ExportSelectionAsync(ActionEventArgs args)
    {
        ShowSuccess("#SelectionExported");
        return Task.CompletedTask;
    }

    // Réinitialise la sélection et masque le panneau d'actions contextuelles.
    private Task ClearSelectionAsync(ActionEventArgs args)
    {
        HasSelection = false;
        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
ActionContent	RenderFragment	null	LgActionPanel	Contenu affiché dans la zone gauche du panneau.
CssClass	string	null	LgActionPanel	Classes CSS additionnelles appliquées au conteneur d-flex action-pnl.
Disabled	bool	false	LgActionPanel	Ajoute la classe CSS disabled au panneau. Ne désactive pas automatiquement les actions enfants.
Toolbar	RenderFragment	null	LgActionPanel	Contenu de la barre d'outils, rendu à l'intérieur d'un LgToolbar interne.
ToolbarButtonSize	ButtonSize?	null	LgActionPanel	Taille des boutons de la barre d'outils. Dans l'implémentation actuelle, la taille interne est chargée depuis ActionPanelToolbarButtonSize lorsque ce paramètre vaut null.
AriaLabel	string	null	LgAriaComponentBase	Valeur de l'attribut aria-label du groupe.
AriaLabelledBy	string	null	LgAriaComponentBase	Valeur de l'attribut aria-labelledby du groupe.

Événements

LgActionPanel n'expose aucun EventCallback propre. Les événements sont portés par les composants placés dans ActionContent ou Toolbar (par exemple LgToolbarButton.OnClick).

Énumérations associées

ButtonSize

Valeur	Description
Medium	Taille standard.
Small	Taille réduite.
Large	Grande taille.

Accessibilité

• Le conteneur est rendu avec role="group" et reprend AriaLabel / AriaLabelledBy.
• Donnez un libellé accessible au panneau lorsque le contenu gauche ne décrit pas suffisamment le groupe d'actions.
• Disabled est visuel au niveau du panneau : les contrôles enfants doivent porter leur propre état désactivé pour être correctement annoncés et neutralisés.

Composants liés

• LgButton — bouton d'action de base, également ancêtre de LgToolbarButton.
• LgLabelAction — alternative compacte pour afficher une valeur avec une action unique.