LgNavLink

LgNavLink est le lien de navigation Lagoon qui reprend le comportement de LgHyperlink et ajoute automatiquement la classe CSS active lorsque la page courante correspond à l'URI du lien.

<LgNavLink Link="@MyPage.Link()">Ma page</LgNavLink>

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

Lien actif automatique

LgNavLink écoute la navigation de l'application Lagoon et compare la PageKey de l'URI cible avec la localisation courante. Quand elles correspondent, la classe CSS active est ajoutée au lien rendu.

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Lien vers une page typée

Utilisez Link pour pointer vers une page Lagoon via sa méthode Link(). Le composant calcule l'état actif à partir de l'URI cible et ajoute automatiquement la classe active lorsque la page courante correspond.

MainMenu.razor

@inherits LgComponentBase

<LgNavLink Link="@DashboardPage.Link()" CssClass="nav-link">
    @("#Dashboard".Translate())
</LgNavLink>

<LgNavLink Link="@OrdersPage.Link()" CssClass="nav-link">
    @("#Orders".Translate())
</LgNavLink>

Navigation typée

Préférez Link="@OrdersPage.Link()" à une route saisie manuellement. La route reste alors synchronisée avec la page et LgNavLink peut calculer l'état actif sur la même URI.

Lien vers une URI ou une fenêtre cible

Uri est prioritaire sur Link.Uri. Target permet d'ouvrir la destination dans une autre fenêtre ou un autre onglet.

MainMenu.razor

@inherits LgComponentBase

<LgNavLink Uri="help/orders" CssClass="nav-link">
    @("#Help".Translate())
</LgNavLink>

<LgNavLink Uri="https://example.org/status" Target="_blank" CssClass="nav-link">
    @("#ExternalStatus".Translate())
</LgNavLink>

Contenu personnalisé avec icône

Le contenu affiché vient de ChildContent. Ajoutez une icône ou un texte conditionnel dans le lien lorsque la navigation doit être plus visuelle.

PagerNavigation.razor

@inherits LgComponentBase

<LgNavLink Uri="orders/previous" CssClass="@_previousCssClass">
    <LgIcon IconName="@IconNames.All.ArrowLeftShort" />
    @if (_displayText)
    {
        <span>@("#Previous".Translate())</span>
    }
</LgNavLink>

PagerNavigation.razor.cs

public partial class PagerNavigation : LgComponentBase
{
    // Affiche ou masque le texte en complément de l'icône selon la place disponible.
    private bool _displayText = true;

    // Classe additionnelle calculée par le composant appelant pour adapter le rendu au contexte.
    private string _previousCssClass = "nav-link nav-link-previous";
}

Exécuter une action avant de naviguer

OnClick est prioritaire sur la navigation automatique : lorsque le callback est défini, l'action doit naviguer elle-même si nécessaire.

DashboardPage.razor

@inherits LgPage

<LgNavLink Link="@OrdersPage.Link()"
           ConfirmationMessage="#ConfirmOpenOrders"
           OnClick="OpenOrdersAsync"
           CssClass="nav-link">
    @("#OpenOrders".Translate())
</LgNavLink>

DashboardPage.razor.cs

public partial class DashboardPage : LgPage
{
    // Vérifie le contexte avant navigation ; indispensable car OnClick désactive la navigation automatique.
    private Task OpenOrdersAsync(ActionEventArgs args)
    {
        App.NavigateTo(OrdersPage.Link().Uri);
        return Task.CompletedTask;
    }
}

attention

Priorité de OnClick

Si OnClick possède un gestionnaire, GetNavigateToUri() retourne null. Ne définissez donc OnClick que si vous voulez remplacer la navigation standard.

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
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgHyperlink	Attributs HTML additionnels appliqués à l'élément a rendu (capture des valeurs non mappées).
ChildContent	RenderFragment	null	LgHyperlink	Contenu affiché dans le lien.
CommandArgument	object	null	LgHyperlink	Argument associé à la commande envoyée au gestionnaire parent. Utilisez des types primitifs ou string pour optimiser le rendu.
CommandName	string	null	LgHyperlink	Nom de la commande envoyée au ICommandListener parent.
ConfirmationMessage	string	null	LgHyperlink	Message de confirmation affiché avant l'action. Incompatible avec CommandName.
CssClass	string	null	LgHyperlink	Classes CSS additionnelles. LgNavLink ajoute aussi active lorsque le lien correspond à la page courante.
Link	LgPageLink	null	LgHyperlink	Informations de lien vers une page Lagoon typée. Utilisé si Uri n'est pas renseigné.
OnClick	EventCallback<ActionEventArgs>	—	LgHyperlink	Callback déclenché au clic. Si défini, il remplace la navigation automatique.
StopPropagation	bool	true	LgHyperlink	Stoppe la propagation de l'événement clic (@onclick:stopPropagation).
Target	string	null	LgHyperlink	Nom de la fenêtre du navigateur dans laquelle ouvrir l'URI.
Uri	string	null	LgHyperlink	URI / route à ouvrir au clic. Utilisée en priorité sur Link.Uri.

Paramètres en cascade

LgNavLink consomme aussi des paramètres fournis automatiquement par des composants ancêtres : AppComponent (LgApp, utilisé pour suivre la navigation), ParentCommandListener (ICommandListener, utilisé avec CommandName) et ContextProvider (IComponentContextProvider, hérité de LgComponentBase).

Événements

Événement	Type	Description
OnClick	EventCallback<ActionEventArgs>	Déclenché au clic. ActionEventArgs expose le WaitingContext de l'action.

Accessibilité

• Le contenu du lien doit rester explicite : évitez un lien composé uniquement d'une icône sans texte accessible.
• L'état actif est matérialisé par la classe CSS active; ajoutez un attribut approprié via AdditionalAttributes si votre contexte nécessite une indication ARIA supplémentaire.
• StopPropagation vaut true par défaut : vérifiez ce comportement si le lien est placé dans un conteneur qui écoute aussi les clics.

Composants liés

• LgHyperlink — lien hypertexte de base utilisé par LgNavLink.
• LgButton — alternative pour une action ou une navigation présentée comme un bouton.