LgNavigationBox

LgNavigationBox est une zone de recherche de navigation. Elle affiche une liste de pages (TPageLink : IPageLink) dans un menu déroulant, filtre les résultats à partir du texte saisi et navigue vers l'URI de l'élément choisi.

<LgNavigationBox Items="_items" Placeholder="#menuSearchSetAria" />

• Espace de noms : Lagoon.UI.Components
• Hérite de : LgSuggestBoxBase<TPageLink> → LgTextBox → LgInputRenderBase<string> → LgInputBase<string> → LgAriaComponentBase → LgComponentBase
• Interfaces : ILgDropDownComponent, IInputCommonProperties, ILgComponentPolicies, IInputBusy, ILgFocusableComponent
• Package NuGet : Lagoon.UI

Données locales ou distantes

Items fournit une liste locale. ControllerUri permet de charger les résultats à distance avec le même filtrage textuel côté composant.

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Liste locale de pages

Pour une liste de pages connue côté client, fournissez Items. Le composant recherche dans le Title de chaque IPageLink et navigue vers Uri au clic ou à la validation clavier.

SearchPage.razor

@inherits LgPage

<LgNavigationBox Items="_items"
                 Label="#SearchPage"
                 Placeholder="#SearchNavigationPlaceholder"
                 MinSearchCharacter="1"
                 MaxItemsInView="8" />

SearchPage.razor.cs

public partial class SearchPage : LgPage
{
    // Pages proposées dans la recherche locale ; les liens typés évitent les routes dupliquées.
    private readonly List<LgPageLink> _items = new()
    {
        DashboardPage.Link(),
        OrdersPage.Link(),
        CustomersPage.Link(),
        ReportsPage.Link()
    };
}

Recherche distante avec ControllerUri

Lorsque la liste dépend de droits ou de données serveur, utilisez ControllerUri. Le composant poste automatiquement une requête de données vers {ControllerUri}/$qd avec le texte saisi, la pagination et le filtre sur Title.

AppLayout.razor

@inherits LgComponentBase

<LgNavigationBox ControllerUri="api/navigation/pages"
                 Label="#Search"
                 Placeholder="#SearchNavigationPlaceholder"
                 MinSearchCharacter="2"
                 MaxItemsInView="10"
                 TextFilterCollation="CollationType.IgnoreCaseAndAccent" />

Contrat des endpoints

ControllerUri pointe vers une action queryable. Le composant appelle {ControllerUri}/$qd en POST via le chargeur distant Lagoon ; l'action source reste exposée en GET et décorée avec [Queryable].

GET + POST $qd — Recherche de pages (ControllerUri)

NavigationController.cs

[ApiController]
[Route("api/navigation")]
public class NavigationController : LgControllerBase
{
    [HttpGet("pages")]
    [Queryable]
    public IQueryable<LgPageLink> GetPages()
    {
        // Construit la liste complète côté serveur afin d'appliquer les droits ou les règles métier avant filtrage.
        List<LgPageLink> pages = new()
        {
            DashboardPage.Link(),
            OrdersPage.Link(),
            CustomersPage.Link(),
            ReportsPage.Link()
        };

        // Retourne IQueryable pour laisser [Queryable] appliquer le texte recherché, la pagination et les tris.
        return pages.AsQueryable();
    }
}

Données locales ou distantes

Items est plus simple pour une liste statique. ControllerUri devient pertinent si la liste est volumineuse, dynamique ou filtrée par des droits calculés côté serveur.

Filtrage, collation et nombre de résultats

FilterTextSearchMode, TextFilterCollation, MinSearchCharacter et MaxItemsInView permettent d'ajuster le comportement de recherche.

SearchPage.razor

@inherits LgPage

<LgNavigationBox Items="_items"
                 Placeholder="#SearchNavigationPlaceholder"
                 FilterTextSearchMode="FilterTextSearchMode.StartsWith"
                 TextFilterCollation="CollationType.IgnoreCaseAndAccent"
                 MinSearchCharacter="0"
                 MaxItemsInView="0" />

Paramètre	Effet
MinSearchCharacter="0"	Ouvre la recherche même sans saisie.
MaxItemsInView="0"	Affiche tous les résultats disponibles.
FilterTextSearchMode	Choisit Contains, StartsWith ou EndsWith.
TextFilterCollation	Gère la casse et les accents lors du filtrage.

Personnaliser le rendu des résultats

ItemContent remplace le rendu par défaut. Si HighlightText est activé, ajoutez la classe highlightable sur l'élément qui contient le texte à surligner.

SearchPage.razor

@inherits LgPage

<LgNavigationBox Items="_items" HighlightText="true" Placeholder="#SearchNavigationPlaceholder">
    <ItemContent Context="item">
        <LgIcon IconName="@item.IconName" />
        <span class="highlightable">@item.Title.CheckTranslate()</span>
    </ItemContent>
</LgNavigationBox>

Sans ItemContent, le composant affiche automatiquement l'icône IconName et le titre traduit Title dans un LgHyperlink interne.

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
ControllerUri	string	null	LgSuggestBoxBase<TItem>	URI du contrôleur utilisé pour charger les résultats à distance.
DropDownMaxHeight	int	-1	LgSuggestBoxBase<TItem>	Hauteur maximale du menu déroulant, en pixels. -1 utilise l'espace disponible.
FilterTextSearchMode	FilterTextSearchMode	FilterTextSearchMode.Contains	LgSuggestBoxBase<TItem>	Mode de comparaison utilisé pour filtrer le texte recherché.
HighlightText	bool	false	LgSuggestBoxBase<TItem>	Surligne le texte trouvé dans les résultats affichés.
ItemContent	RenderFragment<TPageLink>	null	LgSuggestBoxBase<TItem>	Template personnalisé pour rendre un résultat.
Items	IEnumerable<TPageLink>	null	LgSuggestBoxBase<TItem>	Source locale des pages proposées.
MaxItemsInView	int	8	LgSuggestBoxBase<TItem>	Nombre maximum de résultats affichés. 0 affiche tous les résultats.
MinSearchCharacter	int	0	LgSuggestBoxBase<TItem>	Nombre minimal de caractères avant de lancer la recherche.
TextFilterCollation	CollationType?	null	LgSuggestBoxBase<TItem>	Sensibilité à la casse et aux accents. Si null, la valeur de App.BehaviorConfiguration.TextFilterCollation.Value est utilisée à l'initialisation.
AllowResize	bool	false	LgTextBox	Autorise le redimensionnement lorsque TextMode vaut TextBoxMode.Multiline.
AutoComplete	bool	false	LgTextBox	Active l'autocomplétion du navigateur si true; sinon l'attribut autocomplete="off" est rendu.
AutoUnmask	bool	false	LgTextBox	Retourne la valeur sans le masque lorsque InputMask est utilisé.
ClearIncomplete	bool	false	LgTextBox	Vide la valeur si le masque de saisie est incomplet.
DataList	List<string>	null	LgTextBox	Liste de valeurs utilisée pour rendre un datalist associé à l'entrée.
InputMask	string	null	LgTextBox	Masque de saisie appliqué au champ texte.
InputMaskKind	InputMaskKind	InputMaskKind.None	LgTextBox	Type de masque de saisie.
MaxLength	int?	null	LgTextBox	Nombre maximal de caractères. Si non défini, il est déduit de Container ou de l'attribut MaxLength du modèle, sinon 0.
MaxRows	int?	null	LgTextBox	Nombre maximal de lignes lorsque TextMode vaut TextBoxMode.Multiline.
MinRows	int?	null	LgTextBox	Nombre minimal de lignes lorsque TextMode vaut TextBoxMode.Multiline.
OnChangingAsync	Func<ChangingEventArgs<string>, Task>	null	LgTextBox	Callback appelé avant la modification de valeur ; il peut annuler le changement.
OnChangeDisabled	bool	false	LgTextBox	Désactive le gestionnaire onchange natif du champ.
OnFocus	EventCallback<FocusEventArgs>	—	LgTextBox	Callback déclenché lorsque le champ reçoit le focus.
OnInput	EventCallback<ChangeEventArgs>	—	LgTextBox	Callback déclenché à la saisie (oninput).
OnKeyUp	EventCallback<KeyboardEventArgs>	—	LgTextBox	Callback déclenché au relâchement d'une touche.
Placeholder	string	null	LgTextBox	Placeholder du champ de recherche.
Rows	int?	null	LgTextBox	Nombre de lignes lorsque TextMode vaut TextBoxMode.Multiline.
TextMode	TextBoxMode?	null	LgTextBox	Mode du champ texte. null rend un champ texte simple.
Prefix	string	IconNames.All.Search	LgInputRenderBase<TValue>	Préfixe affiché avant le champ. Le constructeur de LgNavigationBox le définit sur l'icône de recherche.
PrefixType	InputLabelType	InputLabelType.IconName	LgInputRenderBase<TValue>	Type de rendu du préfixe.
Suffix	string	null	LgInputRenderBase<TValue>	Suffixe affiché après le champ.
SuffixType	InputLabelType	InputLabelType.Text	LgInputRenderBase<TValue>	Type de rendu du suffixe.
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgInputBase<TValue>	Attributs HTML additionnels appliqués au conteneur principal (capture des valeurs non mappées).
AutoFocus	bool	false	LgInputBase<TValue>	Donne le focus au champ lors du premier rendu.
ConfirmationMessage	string	null	LgInputBase<TValue>	Message de confirmation affiché avant d'appliquer une nouvelle valeur.
Container	IInputContainer<string>	null	LgInputBase<TValue>	Conteneur interne utilisé notamment par les cellules de LgGridView.
CssClass	string	null	LgInputBase<TValue>	Classes CSS additionnelles du groupe de formulaire.
Disabled	bool	false	LgInputBase<TValue>	Désactive le champ.
DisplayName	string	null	LgInputBase<TValue>	Nom d'affichage utilisé dans les messages de validation et de parsing.
HideValidationMessage	bool	false	LgInputBase<TValue>	Masque les messages de validation inline.
Label	string	null	LgInputBase<TValue>	Libellé du champ.
LabelContent	RenderFragment	null	LgInputBase<TValue>	Contenu personnalisé du libellé.
OnChange	EventCallback<ChangeEventArgs>	—	LgInputBase<TValue>	Callback appelé après l'application d'une nouvelle valeur.
OnReset	EventCallback<ChangeEventArgs>	—	LgInputBase<TValue>	Callback appelé lorsque le bouton de réinitialisation remet la valeur à default.
PolicyEdit	string	null	LgInputBase<TValue>	Policy requise pour éditer le champ.
PolicyVisible	string	null	LgInputBase<TValue>	Policy requise pour afficher le champ.
ReadOnly	bool	false	LgInputBase<TValue>	Rend le champ en lecture seule.
Required	bool?	null	LgInputBase<TValue>	Indique si le champ est obligatoire. Si null, l'information est déduite de l'attribut [Required] du modèle.
ResetButton	bool?	null	LgInputBase<TValue>	Affiche le bouton de réinitialisation. Si null, la configuration applicative est utilisée.
ResetText	string	null	LgInputBase<TValue>	Texte du bouton de réinitialisation ; la configuration applicative est utilisée si non défini.
ResetTextAriaLabel	string	null	LgInputBase<TValue>	Libellé ARIA du bouton de réinitialisation ; la configuration applicative est utilisée si non défini.
Tooltip	string	null	LgInputBase<TValue>	Bulle d'aide du champ.
TooltipIsHtml	bool	false	LgInputBase<TValue>	Indique si le contenu de Tooltip est au format HTML.
Value	string	null	LgInputBase<TValue>	Valeur du champ, utilisable avec @bind-Value.
ValueChanged	EventCallback<string>	—	LgInputBase<TValue>	Callback de liaison bidirectionnelle de Value.
ValueExpression	Expression<Func<string>>	null	LgInputBase<TValue>	Expression identifiant la valeur liée, utilisée par la validation Blazor.
AriaLabel	string	null	LgAriaComponentBase	Valeur de l'attribut aria-label.
AriaLabelledBy	string	null	LgAriaComponentBase	Valeur de l'attribut aria-labelledby.

Paramètres en cascade

LgNavigationBox consomme aussi des paramètres fournis automatiquement par des composants ancêtres : CascadedEditContext (EditContext), EditFormConfiguration (LgEditFormConfiguration), ParentAuthorizeView (LgAuthorizeView), InputBusyReference (InputBusyReference) et ContextProvider (IComponentContextProvider, hérité de LgComponentBase).

Événements

Événement	Type	Description
ValueChanged	EventCallback<string>	Callback généré par @bind-Value lorsque la valeur change.
OnChange	EventCallback<ChangeEventArgs>	Déclenché après l'application d'une nouvelle valeur.
OnChangingAsync	Func<ChangingEventArgs<string>, Task>	Appelé avant le changement de valeur ; le changement peut être annulé.
OnFocus	EventCallback<FocusEventArgs>	Déclenché lorsque le champ reçoit le focus.
OnInput	EventCallback<ChangeEventArgs>	Déclenché pendant la saisie et utilisé par la recherche.
OnKeyUp	EventCallback<KeyboardEventArgs>	Déclenché au relâchement d'une touche.
OnReset	EventCallback<ChangeEventArgs>	Déclenché lorsque le bouton de réinitialisation remet la valeur à default.

Énumérations associées

FilterTextSearchMode

Valeur	Description
Contains	Le texte recherché est contenu dans la valeur.
StartsWith	La valeur commence par le texte recherché.
EndsWith	La valeur se termine par le texte recherché.

CollationType

Valeur	Description
CaseSensitive	Sensible à la casse et aux accents.
IgnoreCase	Insensible à la casse, sensible aux accents.
IgnoreCaseAndAccent	Insensible à la casse et aux accents.

InputLabelType

Valeur	Description
IconName	Le préfixe ou suffixe est un nom d'icône Lagoon.
Text	Le préfixe ou suffixe est un texte simple.

InputMaskKind

Valeur	Description
None	Aucun masque.
Mask	Masque basé sur 9, a et *.
Regex	Masque basé sur une expression régulière.
Email	Masque de saisie email.

TextBoxMode

Valeur	Description
Multiline	Rend une zone de texte multiligne.
Password	Rend un champ mot de passe.

Accessibilité

• Renseignez Label, AriaLabel ou AriaLabelledBy pour nommer le champ de recherche.
• Le constructeur configure un préfixe icône IconNames.All.Search; gardez un libellé accessible, car l'icône seule ne suffit pas.
• Les attributs aria-required, aria-readonly, aria-invalid et aria-describedby sont gérés par la base d'entrée selon la validation et l'état du champ.

Composants liés

• LgHyperlink — composant utilisé pour rendre les résultats de navigation.
• LgNavLink — lien de navigation avec état actif automatique.
• LgButton — alternative pour déclencher une navigation depuis une action de bouton.