LgFilterFrame

LgFilterFrame étend LgFrame pour construire un panneau de filtres prêt à l'emploi. Il ajoute automatiquement des actions de réinitialisation et, si nécessaire, un bouton pour révéler une zone de filtres avancés.

<LgFilterFrame Title="Filtres">
    <ChildListViewContent>
        Filtres principaux
    </ChildListViewContent>
</LgFilterFrame>

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

Toolbar enrichie automatiquement

LgFilterFrame réutilise la propriété héritée Toolbar, puis y ajoute toujours un bouton Réinitialiser et, uniquement si ChildContentViewMore est défini, un bouton Voir plus / Voir moins.

Utilisation

Panneau de filtres avec zone avancée

Le contenu principal se place dans ChildListViewContent. La zone ChildContentViewMore reste masquée tant que l'utilisateur n'active pas Voir plus ; si elle est absente, le bouton Voir plus / Voir moins n'est pas rendu. Le bouton Réinitialiser est toujours ajouté à la toolbar.

CustomerSearchPage.razor
@inherits LgPage

<LgEditForm Model="@_search">
    <LgFilterFrame Title="#CustomerFiltersTitle"
                   IconName="@IconNames.All.Funnel"
                   Kind="Kind.Secondary"
                   OnResetFilters="OnResetFiltersAsync"
                   OnViewMoreFilters="OnViewMoreFiltersAsync"
                   OnCommand="OnFilterCommandAsync">
        <Toolbar>
            <LgToolbarButton Text="#ExportCustomers"
                             IconName="@IconNames.All.Pdf"
                             CommandName="export-customers" />
        </Toolbar>
        <ChildListViewContent>
            <LgTextBox @bind-Value="_search.Name"
                       Label="#CustomerName"
                       Placeholder="#CustomerNamePlaceholder"
                       OnChange="OnSearchChangedAsync" />
            <LgTextBox @bind-Value="_search.Type"
                       Label="#CustomerType"
                       Placeholder="#CustomerTypePlaceholder"
                       OnChange="OnSearchChangedAsync" />
        </ChildListViewContent>
        <ChildContentViewMore>
            <LgNumericBox @bind-Value="_search.Year"
                          Label="#CustomerYear"
                          Placeholder="#CustomerYearPlaceholder"
                          OnChange="OnSearchChangedAsync" />
            <LgTextBox @bind-Value="_search.Color"
                       Label="#CustomerColor"
                       Placeholder="#CustomerColorPlaceholder"
                       OnChange="OnSearchChangedAsync" />
        </ChildContentViewMore>
        <FooterContent>
            <p>@("#CustomerResultCount".Translate()) @_resultCount</p>
        </FooterContent>
    </LgFilterFrame>
</LgEditForm>

CustomerSearchPage.razor.cs
public partial class CustomerSearchPage : LgPage
{
    // Modèle de filtres lié aux champs : le réinitialiser remet toute la recherche à zéro.
    private CustomerSearchCriteria _search = new();

    // Compteur affiché dans le footer pour donner un retour immédiat sur les critères saisis.
    private int _resultCount = 42;

    // Suit l'ouverture de la zone avancée afin d'adapter un chargement ou une télémétrie métier.
    private bool _showAdvancedFilters;

    // Remet les critères à leur valeur par défaut puis relance la recherche.
    private Task OnResetFiltersAsync(FilterFrameResetEventArgs args)
    {
        _search = new();
        return RefreshResultsAsync();
    }

    // Notifie l'affichage des filtres avancés : chargez ici les listes nécessaires aux champs additionnels.
    private Task OnViewMoreFiltersAsync(FilterFrameViewMoreEventArgs args)
    {
        _showAdvancedFilters = args.ShowViewMore;
        return Task.CompletedTask;
    }

    // Déclenché par les champs principaux et avancés : synchronise la liste avec les critères courants.
    private Task OnSearchChangedAsync(ChangeEventArgs args)
    {
        return RefreshResultsAsync();
    }

    // Reçoit les commandes ajoutées dans la toolbar, en plus des boutons automatiques du composant.
    private Task OnFilterCommandAsync(CommandEventArgs args)
    {
        if (args.CommandName == "export-customers")
        {
            args.Handled = true;
        }

        return Task.CompletedTask;
    }

    // Recharge la source de données filtrée ; l'exemple ajuste seulement un compteur.
    private Task RefreshResultsAsync()
    {
        _resultCount = string.IsNullOrWhiteSpace(_search.Name) ? 42 : 8;
        return Task.CompletedTask;
    }

    private sealed class CustomerSearchCriteria
    {
        public string Name { get; set; }

        public string Type { get; set; }

        public int? Year { get; set; }

        public string Color { get; set; }
    }
}

Points d'attention

ChildContent est hérité de LgFrame, mais le rendu de LgFilterFrame utilise ChildListViewContent et ChildContentViewMore.
Toolbar complète les boutons automatiques : elle ne remplace ni Réinitialiser, ni Voir plus / Voir moins.
OnResetFilters ne replie pas automatiquement la zone avancée ; il sert à réinitialiser votre modèle de filtres.
OnViewMoreFilters expose FilterFrameViewMoreEventArgs.ShowViewMore pour savoir si la zone avancée vient d'être affichée ou masquée.

Propriétés

Nom	Type	Défaut	Déclaré dans	Description
`ChildListViewContent`	`RenderFragment`	`null`	`LgFilterFrame`	Contenu principal du panneau de filtres.
`ChildContentViewMore`	`RenderFragment`	`null`	`LgFilterFrame`	Contenu supplémentaire masqué par défaut, affiché via le bouton Voir plus / Voir moins.
`OnResetFilters`	`EventCallback<FilterFrameResetEventArgs>`	—	`LgFilterFrame`	Callback déclenché au clic sur Réinitialiser les filtres.
`OnViewMoreFilters`	`EventCallback<FilterFrameViewMoreEventArgs>`	—	`LgFilterFrame`	Callback déclenché au clic sur Voir plus / Voir moins.
`ChildContent`	`RenderFragment`	`null`	`LgFrame`	Paramètre hérité, mais non utilisé par le rendu de `LgFilterFrame`. Utilisez `ChildListViewContent` et `ChildContentViewMore` à la place.
`FooterContent`	`RenderFragment`	`null`	`LgFrame`	Contenu du pied de page.
`HeaderContent`	`RenderFragment`	`null`	`LgFrame`	Contenu libre ajouté dans l'en-tête.
`SummaryContent`	`RenderFragment`	`null`	`LgFrame`	Résumé affiché lorsque le frame est replié.
`TitleContent`	`RenderFragment`	`null`	`LgFrame`	Titre personnalisé en markup.
`Toolbar`	`RenderFragment`	`null`	`LgFrame`	Contenu additionnel de toolbar, fusionné avec les boutons automatiques du composant.
`AdditionalAttributes`	`IReadOnlyDictionary<string, object>`	`null`	`LgFrame`	Attributs HTML additionnels appliqués à l'élément racine.
`ButtonSize`	`ButtonSize?`	`null`	`LgFrame`	Taille des boutons de toolbar.
`ChildCssClass`	`string`	`null`	`LgFrame`	Classes CSS du contenu principal.
`Collapsable`	`bool`	`false`	`LgFrame`	Active le repli du panneau.
`Collapsed`	`bool`	`false`	`LgFrame`	État replié courant.
`CollapsedChanged`	`EventCallback<bool>`	—	`LgFrame`	Callback de two-way binding pour `Collapsed`.
`CssClass`	`string`	`null`	`LgFrame`	Classes CSS additionnelles.
`DefaultCollapsed`	`bool?`	`null`	`LgFrame`	État initial de repli appliqué lors de l'initialisation.
`HeaderCssClass`	`string`	`null`	`LgFrame`	Classes CSS de l'en-tête.
`IconName`	`string`	`null`	`LgFrame`	Icône affichée devant le titre.
`Kind`	`Kind`	`Kind.Primary`	`LgFrame`	Thème visuel du panneau.
`OnCommand`	`EventCallback<CommandEventArgs>`	—	`LgFrame`	Réception des commandes bubbled par les composants enfants.
`OnToggle`	`EventCallback<ToggleFrameEventArgs>`	—	`LgFrame`	Callback de repli/dépli hérité de `LgFrame`.
`ShowHeader`	`bool`	`true`	`LgFrame`	Affiche ou masque l'en-tête.
`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

Événement	Type	Description
`OnResetFilters`	`EventCallback<FilterFrameResetEventArgs>`	Déclenché lorsque l'utilisateur clique sur le bouton Réinitialiser les filtres ajouté par le composant.
`OnViewMoreFilters`	`EventCallback<FilterFrameViewMoreEventArgs>`	Déclenché lorsque l'utilisateur affiche ou masque la zone `ChildContentViewMore`.
`CollapsedChanged`	`EventCallback<bool>`	Hérité de `LgFrame` pour synchroniser `Collapsed` si vous rendez aussi le panneau repliable.
`OnCommand`	`EventCallback<CommandEventArgs>`	Hérité de `LgFrame` pour récupérer les commandes bubbled depuis le contenu enfant.
`OnToggle`	`EventCallback<ToggleFrameEventArgs>`	Hérité de `LgFrame` pour suivre un éventuel repli manuel du panneau.

Énumérations associées

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

`Kind`

Kind contrôle le thème visuel de la propriété héritée Kind du panneau. 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 panneau.

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 LgFilterFrame hérite.
LgToolbarButton — bouton typiquement utilisé pour compléter la toolbar du panneau.
LgSplitContainer — disposition fréquente pour placer un panneau de filtres à côté d'une zone de résultats.

Utilisation​

Panneau de filtres avec zone avancée​

Points d'attention​

Propriétés​

Événements​

Énumérations associées​

Kind​

ButtonSize​

Composants liés​