LgAccordion

LgAccordion regroupe plusieurs panneaux LgAccordionPane et garantit qu'un seul panneau reste ouvert à la fois. Chaque pane est un LgFrame spécialisé, repliable et fermé par défaut.

<LgAccordion>
    <LgAccordionPane Title="Section 1">
        Contenu
    </LgAccordionPane>
</LgAccordion>

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

Pane spécialisé

LgAccordionPane hérite de LgFrame, avec Collapsable = true et DefaultCollapsed = true. Le conteneur réaffecte aussi OnToggle pour refermer automatiquement les autres panneaux.

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Accordéon simple à trois panneaux

Chaque LgAccordionPane est un LgFrame repliable et fermé par défaut. Le conteneur garantit qu'un seul panneau est ouvert à la fois.

CustomerDetailsPage.razor

@inherits LgPage

<LgAccordion CssClass="customer-accordion">
    <LgAccordionPane Title="#CustomerContactTitle"
                     IconName="@IconNames.All.People">
        <HeaderContent>
            <span>@("#CustomerContactHeader".Translate())</span>
        </HeaderContent>
        <ChildContent>
            <p>@_customerContact</p>
        </ChildContent>
    </LgAccordionPane>

    <LgAccordionPane Title="#DeliveryAddressTitle"
                     Kind="Kind.Secondary">
        <ChildContent>
            <p>@_deliveryAddress</p>
        </ChildContent>
    </LgAccordionPane>

    <LgAccordionPane Title="#BillingAddressTitle"
                     Kind="Kind.Default">
        <ChildContent>
            <p>@_billingAddress</p>
        </ChildContent>
    </LgAccordionPane>
</LgAccordion>

CustomerDetailsPage.razor.cs

public partial class CustomerDetailsPage : LgPage
{
    // Informations affichées dans le premier panneau de l'accordéon.
    private string _customerContact = "Marie Martin — marie.martin@example.test";

    // Adresse métier affichée dans le panneau de livraison.
    private string _deliveryAddress = "12 rue des Peupliers, 44000 Nantes";

    // Adresse métier affichée dans le panneau de facturation.
    private string _billingAddress = "18 avenue du Port, 44000 Nantes";
}

Panneau enrichi comme un frame

Comme LgAccordionPane hérite de LgFrame, vous pouvez réutiliser Toolbar, SummaryContent, FooterContent, HeaderContent, Kind, IconName et OnCommand. Évitez en revanche de piloter OnToggle dans un pane contenu par LgAccordion : le conteneur l'utilise pour fermer les autres panneaux.

ContractAccordionPage.razor

@inherits LgPage

<LgAccordion>
    <LgAccordionPane Title="#ContractDocumentsTitle"
                     IconName="@IconNames.All.Folder"
                     Kind="Kind.Info"
                     OnCommand="OnDocumentsCommandAsync">
        <Toolbar>
            <LgToolbarButton Text="#ExportDocuments"
                             IconName="@IconNames.All.Pdf"
                             CommandName="export-documents" />
        </Toolbar>
        <ChildContent>
            <p>@("#ContractDocumentsContent".Translate())</p>
        </ChildContent>
        <SummaryContent>
            <p>@("#ContractDocumentsSummary".Translate()) @_documentCount</p>
        </SummaryContent>
        <FooterContent>
            <p>@("#ContractDocumentsFooter".Translate())</p>
        </FooterContent>
    </LgAccordionPane>

    <LgAccordionPane Title="#ContractHistoryTitle"
                     IconName="@IconNames.All.ClockHistory">
        <ChildContent>
            <p>@("#ContractHistoryContent".Translate())</p>
        </ChildContent>
    </LgAccordionPane>
</LgAccordion>

ContractAccordionPage.razor.cs

public partial class ContractAccordionPage : LgPage
{
    // Compteur affiché dans le résumé lorsque le panneau documents est replié.
    private int _documentCount = 7;

    // Centralise les commandes de la toolbar du panneau documents.
    private Task OnDocumentsCommandAsync(CommandEventArgs args)
    {
        if (args.CommandName == "export-documents")
        {
            args.Handled = true;
        }

        return Task.CompletedTask;
    }
}

Points d'attention

• LgAccordion n'expose pas de propriété publique pour sélectionner directement le panneau actif.
• Les panes sont initialisés avec Collapsable="true" et DefaultCollapsed="true".
• Les propriétés de frame restent disponibles sur chaque pane, mais l'ouverture exclusive est gérée par le conteneur.

Propriétés

Propriétés de LgAccordion

Nom	Type	Défaut	Déclaré dans	Description
ChildContent	RenderFragment	null	LgAccordion	Contenu du conteneur, généralement une liste de LgAccordionPane.
CssClass	string	null	LgAccordion	Classes CSS additionnelles appliquées au conteneur de l'accordéon.

Propriétés de LgAccordionPane

Nom	Type	Défaut	Déclaré dans	Description
ChildContent	RenderFragment	null	LgFrame	Contenu principal du panneau.
FooterContent	RenderFragment	null	LgFrame	Contenu du pied de page du panneau.
HeaderContent	RenderFragment	null	LgFrame	Contenu libre affiché dans l'en-tête du panneau.
SummaryContent	RenderFragment	null	LgFrame	Résumé affiché lorsque le panneau est replié.
TitleContent	RenderFragment	null	LgFrame	Titre personnalisé en markup.
Toolbar	RenderFragment	null	LgFrame	Toolbar rendue dans l'en-tête du panneau.
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgFrame	Attributs HTML additionnels appliqués à la racine du panneau.
ButtonSize	ButtonSize?	null	LgFrame	Taille des boutons de toolbar.
ChildCssClass	string	null	LgFrame	Classes CSS appliquées au contenu principal.
Collapsable	bool	true	LgFrame	Paramètre hérité ; la valeur par défaut est fournie par le constructeur du pane.
Collapsed	bool	false	LgFrame	État replié courant. Au premier rendu, le pane démarre fermé via DefaultCollapsed.
CollapsedChanged	EventCallback<bool>	—	LgFrame	Callback de two-way binding pour Collapsed.
CssClass	string	accordion-item	LgFrame	Classe CSS appliquée au pane. LgAccordionPane.OnInitialized la fixe à accordion-item.
DefaultCollapsed	bool?	true	LgFrame	Paramètre hérité ; la valeur par défaut appliquée à Collapsed est fournie par le constructeur du pane.
HeaderCssClass	string	null	LgFrame	Classes CSS de l'en-tête du pane.
IconName	string	null	LgFrame	Icône affichée devant le titre du panneau.
Kind	Kind	Kind.Primary	LgFrame	Thème visuel du pane.
OnCommand	EventCallback<CommandEventArgs>	—	LgFrame	Réception des commandes bubbled depuis le contenu du pane.
OnToggle	EventCallback<ToggleFrameEventArgs>	—	LgFrame	Réaffecté par LgAccordion pour fermer automatiquement les autres panes.
ShowHeader	bool	true	LgFrame	Affiche ou masque l'en-tête du pane.
Title	string	null	LgFrame	Titre texte du panneau.
AriaLabel	string	null	LgAriaComponentBase	Valeur de l'attribut aria-label.
AriaLabelledBy	string	null	LgAriaComponentBase	Valeur de l'attribut aria-labelledby.

Événements

LgAccordion n'expose pas d'événement public propre. LgAccordionPane reprend les callbacks de LgFrame.

Événement	Type	Description
CollapsedChanged	EventCallback<bool>	Callback de binding pour suivre l'état replié d'un pane.
OnCommand	EventCallback<CommandEventArgs>	Reçoit les commandes bubbled par les composants enfants du pane.
OnToggle	EventCallback<ToggleFrameEventArgs>	Utilisé en interne par LgAccordion pour imposer l'ouverture exclusive d'un seul pane à la fois.

Énumérations associées

Les énumérations ci-dessous concernent les paramètres hérités de LgFrame exposés par LgAccordionPane.

Kind

Kind contrôle le thème visuel de la propriété héritée Kind du pane. Consultez le tableau complet dans LgFrame (valeur par défaut : Kind.Primary).

ButtonSize

ButtonSize contrôle la propriété héritée ButtonSize, utilisée pour dimensionner les boutons de toolbar du pane.

Valeur	Description
Medium	Taille standard.
Small	Taille réduite (valeur par défaut de la configuration Lagoon standard lorsque ButtonSize reste null).
Large	Grande taille.

Composants liés

• LgFrame — composant de base dont LgAccordionPane hérite.
• LgFilterFrame — autre variante de frame spécialisée.
• LgSplitContainer — disposition utile pour juxtaposer un accordéon et une zone de travail.