LgHyperlink

LgHyperlink is the Lagoon hyperlink component. It renders an a link, can navigate to a URI or a LgPageLink, trigger an OnClick action, request confirmation, and relay a command to a parent ICommandListener.

<LgHyperlink Uri="demo/NavHyperLink">My link</LgHyperlink>

• Namespace : Lagoon.UI.Components
• Inherits from : LgComponentBase
• Interfaces : IActionComponent
• NuGet package : Lagoon.UI

Actions and navigation

If OnClick is set, the custom action takes priority. Otherwise, LgHyperlink uses Uri or Link.Uri as the navigation destination.

Usage

Demo

Try this component in the Lagoon showcase.

Simple link to a URI

LgHyperlink renders an a link and intercepts the click to pass through the Lagoon action mechanism. The visible content is provided by ChildContent.

HelpPage.razor

@inherits LgPage

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

Typed page link

With Link, the URI comes from a LgPageLink. If Uri is also set, Uri takes priority.

HelpPage.razor

@inherits LgPage

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

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

Confirmed action without automatic navigation

Once OnClick is set, the component no longer uses Uri or Link for automatic navigation. This is the right mode for displaying information, triggering processing, or navigating after business validation.

HelpPage.razor

@inherits LgPage

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

HelpPage.razor.cs

public partial class HelpPage : LgPage
{
    // Displays information on click; no automatic navigation is performed when OnClick is set.
    private Task ShowDetailsAsync(ActionEventArgs args)
    {
        ShowInformation("#DetailsDisplayed");
        return Task.CompletedTask;
    }
}

Relay a command to a parent

CommandName sends a command to the parent ICommandListener. LgToolbar implements this interface, allowing you to use a link as a text action in a command container.

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
{
    // Business identifier passed with the command to open the correct record.
    private int _selectedOrderId = 42;

    // Receives the command from the link and performs typed navigation from a central point.
    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 and command

ConfirmationMessage must not be combined with CommandName. In debug mode, this configuration raises an exception to signal the ambiguity.

Add attributes to the rendered link

Unrecognized attributes are captured in AdditionalAttributes and applied to the a element.

HelpPage.razor

@inherits LgPage

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

Properties

All [Parameter] properties of the component, including inherited ones.

Name	Type	Default	Declared in	Description
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgHyperlink	Additional HTML attributes applied to the rendered a element (captures unmapped values).
ChildContent	RenderFragment	null	LgHyperlink	Content displayed in the link.
CommandArgument	object	null	LgHyperlink	Argument associated with the command sent to the parent handler. Use primitive types or string to optimize rendering.
CommandName	string	null	LgHyperlink	Name of the command sent to the parent ICommandListener.
ConfirmationMessage	string	null	LgHyperlink	Confirmation message displayed before the action. Incompatible with CommandName.
CssClass	string	null	LgHyperlink	Additional CSS classes applied to the link.
Link	LgPageLink	null	LgHyperlink	Link information to a typed Lagoon page. Used if Uri is not set.
OnClick	EventCallback<ActionEventArgs>	—	LgHyperlink	Callback triggered on click. If set, it replaces automatic navigation.
StopPropagation	bool	true	LgHyperlink	Stops the propagation of the click event (@onclick:stopPropagation).
Target	string	null	LgHyperlink	Name of the browser window in which to open the URI.
Uri	string	null	LgHyperlink	URI/route to open on click. Takes priority over Link.Uri.

Cascading parameters

LgHyperlink also consumes parameters automatically provided by ancestor components: ParentCommandListener (ICommandListener, used with CommandName) and ContextProvider (IComponentContextProvider, inherited from LgComponentBase).

Events

Event	Type	Description
OnClick	EventCallback<ActionEventArgs>	Triggered on click. ActionEventArgs exposes the WaitingContext of the action.

Accessibility

• The content of ChildContent must clearly describe the destination or action.
• If the link executes only OnClick without a destination, verify that the text explains the triggered action.
• StopPropagation defaults to true: disable it explicitly if a parent container should receive the click.

Related components

• LgNavLink — navigation link with automatic active state.
• LgButton — alternative for an action or navigation presented as a button.