LgHyperlink

LgHyperlink est le composant Lagoon de lien hypertexte. Il rend un lien a, peut naviguer vers une URI ou un LgPageLink, déclencher une action OnClick, demander une confirmation et relayer une commande à un ICommandListener parent.

<LgHyperlink Uri="demo/NavHyperLink">Mon lien</LgHyperlink>

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

Actions et navigation

Si OnClick est défini, l'action personnalisée est prioritaire. Sinon, LgHyperlink utilise Uri ou Link.Uri comme destination de navigation.

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Lien simple vers une URI

LgHyperlink rend un lien a et intercepte le clic pour passer par le mécanisme d'action Lagoon. Le contenu visible est fourni par ChildContent.

HelpPage.razor

@inherits LgPage

<LgHyperlink Uri="help/orders" CssClass="text-bread-crumb">
    @("#OrdersHelp".Translate())
</LgHyperlink>

Lien vers une page typée

Avec Link, l'URI provient d'un LgPageLink. Si Uri est aussi renseigné, Uri garde la priorité.

HelpPage.razor

@inherits LgPage

<LgHyperlink Link="@OrdersPage.Link()">
    @("#Orders".Translate())
</LgHyperlink>

<LgHyperlink Link="@ReportsPage.Link()" Target="_blank">
    @("#OpenReportInNewTab".Translate())
</LgHyperlink>

Action confirmée sans navigation automatique

Dès que OnClick est défini, le composant n'utilise plus Uri ou Link pour naviguer automatiquement. C'est le bon mode pour afficher une information, déclencher un traitement ou naviguer après contrôle métier.

HelpPage.razor

@inherits LgPage

<LgHyperlink ConfirmationMessage="#ConfirmShowDetails"
             OnClick="ShowDetailsAsync"
             CssClass="text-info">
    @("#ShowDetails".Translate())
</LgHyperlink>

HelpPage.razor.cs

public partial class HelpPage : LgPage
{
    // Affiche une information au clic ; aucune navigation automatique n'est effectuée quand OnClick est défini.
    private Task ShowDetailsAsync(ActionEventArgs args)
    {
        ShowInformation("#DetailsDisplayed");
        return Task.CompletedTask;
    }
}

Relayer une commande à un parent

CommandName envoie une commande au ICommandListener parent. LgToolbar implémente cette interface, ce qui permet d'utiliser un lien comme action textuelle dans un conteneur de commandes.

OrdersPage.razor

@inherits LgPage

<LgToolbar OnCommand="OnCommandAsync">
    <LgHyperlink CommandName="open-details" CommandArgument="@_selectedOrderId" CssClass="dropdown-item">
        @("#OpenDetails".Translate())
    </LgHyperlink>
</LgToolbar>

OrdersPage.razor.cs

public partial class OrdersPage : LgPage
{
    // Identifiant métier transmis avec la commande pour ouvrir la bonne fiche.
    private int _selectedOrderId = 42;

    // Reçoit la commande du lien et effectue la navigation typée depuis un point central.
    private Task OnCommandAsync(CommandEventArgs args)
    {
        if (args.CommandName == "open-details")
        {
            args.Handled = true;
            App.NavigateTo(OrderDetailPage.Link((int)args.CommandArgument).Uri);
        }
        return Task.CompletedTask;
    }
}

Confirmation et commande

ConfirmationMessage ne doit pas être combiné avec CommandName. En mode debug, cette configuration déclenche une exception pour signaler l'ambiguïté.

Ajouter des attributs au lien rendu

Les attributs non reconnus sont capturés dans AdditionalAttributes et appliqués à l'élément a.

HelpPage.razor

@inherits LgPage

<LgHyperlink Uri="https://example.org/help"
             Target="_blank"
             rel="noopener noreferrer"
             data-tracking-id="orders-help">
    @("#ExternalHelp".Translate())
</LgHyperlink>

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 appliquées au lien.
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

LgHyperlink consomme aussi des paramètres fournis automatiquement par des composants ancêtres : 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 de ChildContent doit décrire clairement la destination ou l'action.
• Si le lien exécute seulement OnClick sans destination, vérifiez que le texte explique l'action déclenchée.
• StopPropagation vaut true par défaut : désactivez-le explicitement si un conteneur parent doit recevoir le clic.

Composants liés

• LgNavLink — lien de navigation avec état actif automatique.
• LgButton — alternative pour une action ou une navigation présentée comme un bouton.