LgBreadcrumbTrail

LgBreadcrumbTrail affiche un fil d'Ariane pour situer l'utilisateur dans la navigation. Les éléments peuvent être déclarés inline avec LgBreadcrumbTrailItem ou fournis par code via BreadcrumbTrailItemList.

<LgBreadcrumbTrail>
    <LgBreadcrumbTrailItem Text="#Home" Uri="dashboard" />
    <LgBreadcrumbTrailItem Text="#Orders" IsActive="true" />
</LgBreadcrumbTrail>

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

Dernier élément actif

Marquez le dernier LgBreadcrumbTrailItem avec IsActive="true" pour signaler la page courante et éviter une navigation redondante.

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Déclarer le fil d'Ariane inline

Chaque LgBreadcrumbTrailItem peut prendre plusieurs formes : un lien de navigation (Uri), un lien typé vers une page Lagoon (Link), un élément déclenchant une action (OnClick), un libellé simple, ou l'élément courant (IsActive).

OrderDetailPage.razor

@inherits LgPage

<LgBreadcrumbTrail>
    <LgBreadcrumbTrailItem Text="#Home" Uri="dashboard" IconName="@IconNames.HouseFill" />
    <LgBreadcrumbTrailItem Link="OrdersPage.Link()" />
    <LgBreadcrumbTrailItem Text="#ShowInfo" OnClick="OnShowInfoAsync" IconName="@IconNames.All.ChatSquareDots" />
    <LgBreadcrumbTrailItem Text="#OrderDetail" IsActive="true" />
</LgBreadcrumbTrail>

OrderDetailPage.razor.cs

public partial class OrderDetailPage : LgPage
{
    // Action déclenchée par l'élément du fil d'Ariane (un élément peut exécuter du code au lieu de naviguer).
    private Task OnShowInfoAsync(ActionEventArgs args)
    {
        ShowInformation("#OrderInfoMessage");
        return Task.CompletedTask;
    }
}

Lien typé

Préférez Link="OrdersPage.Link()" plutôt qu'un Uri codé en dur : le libellé, l'icône et l'URL proviennent alors directement de la définition de la page (cf. LgPageLink), ce qui évite les liens cassés.

Construire la liste par code avec Items

Lorsque les éléments dépendent de données chargées dynamiquement, construisez la liste en code via BreadcrumbTrailItemList. Cette classe (héritant de List<BreadcrumbTrailItem>) expose des helpers pour chaque type d'élément :

Méthode	Type d'élément créé
Add(LgPageLink link)	Lien typé vers une page Lagoon.
Add(string text, string iconName = null)	Libellé simple (non navigable).
AddUri(string uri, string text, string iconName = null)	Lien de navigation vers une URI.
AddAction(Action onClickHandler, string text, string icon = null)	Élément exécutant une action au clic.
Add(BreadcrumbTrailItem item)	Élément entièrement personnalisé.

OrderDetailPage.razor

@inherits LgPage

<LgBreadcrumbTrail Items="_items" CssClass="mb-3" />

OrderDetailPage.razor.cs

public partial class OrderDetailPage : LgPage
{
    private BreadcrumbTrailItemList _items;

    // Construit le fil d'Ariane par code : pratique quand les éléments dépendent de données chargées dynamiquement.
    protected override void OnInitialized()
    {
        base.OnInitialized();
        _items = new BreadcrumbTrailItemList();
        _items.AddUri("dashboard", "#Home", IconNames.HouseFill);   // lien de navigation
        _items.Add(OrdersPage.Link());                              // lien typé vers une page
        _items.AddAction(ShowOrderInfo, "#ShowInfo", IconNames.All.ChatSquareDots); // action au clic
        _items.Add("#OrderDetail");                                 // libellé courant (non navigable)
    }

    // Action référencée par AddAction : exécutée lors du clic sur l'élément correspondant.
    private void ShowOrderInfo()
    {
        ShowInformation("#OrderInfoMessage");
    }
}

Propriétés

Toutes les propriétés [Parameter] de LgBreadcrumbTrail.

Nom	Type	Défaut	Déclaré dans	Description
ChildContent	RenderFragment	null	LgBreadcrumbTrail	Éléments déclarés inline dans le fil d'Ariane.
CssClass	string	null	LgBreadcrumbTrail	Classes CSS additionnelles.
Items	BreadcrumbTrailItemList	null	LgBreadcrumbTrail	Liste programmatique d'éléments.
AriaLabel	string	null	LgAriaComponentBase	Valeur de l'attribut aria-label.
AriaLabelledBy	string	null	LgAriaComponentBase	Valeur de l'attribut aria-labelledby.

Élément associé : LgBreadcrumbTrailItem

Nom	Type	Défaut	Déclaré dans	Description
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgBreadcrumbTrailItem	Attributs HTML additionnels appliqués à l'élément rendu.
ConfirmationMessage	string	null	LgBreadcrumbTrailItem	Message de confirmation affiché avant l'action.
CssClass	string	null	LgBreadcrumbTrailItem	Classes CSS additionnelles.
IconName	string	null	LgBreadcrumbTrailItem	Icône affichée. Si absente, Link.IconName est utilisé.
IsActive	bool	false	LgBreadcrumbTrailItem	Marque l'élément courant.
Link	LgPageLink	null	LgBreadcrumbTrailItem	Lien typé vers une page Lagoon. Peut fournir texte, icône et URI.
OnClick	EventCallback<ActionEventArgs>	—	LgBreadcrumbTrailItem	Callback exécuté au clic.
Target	string	null	LgBreadcrumbTrailItem	Fenêtre cible pour la navigation.
Text	string	null	LgBreadcrumbTrailItem	Libellé affiché. Si absent, Link.Title est utilisé.
Uri	string	null	LgBreadcrumbTrailItem	URI de navigation.
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
OnClick	EventCallback<ActionEventArgs>	Déclenché au clic sur un LgBreadcrumbTrailItem.

Types associés

BreadcrumbTrailItem

Propriété	Type	Description
IconName	string	Icône de l'élément.
Link	LgPageLink	Lien typé vers une page.
OnClick	Action	Action exécutée au clic lorsqu'on construit la liste en code.
Text	string	Libellé de l'élément.
Uri	string	URI de navigation.

BreadcrumbTrailItemList

BreadcrumbTrailItemList hérite de List<BreadcrumbTrailItem> et fournit des helpers comme Add(LgPageLink), Add(string text, string iconName = null), AddUri(...) et AddAction(...).

Accessibilité

• Fournissez un AriaLabel sur le LgBreadcrumbTrail si le contexte de navigation n'est pas explicite à l'écran.
• Marquez le dernier élément avec IsActive="true" pour éviter une navigation inutile vers la page courante.
• Gardez des libellés courts et ordonnés du plus général au plus spécifique.

Composants liés

• LgMenuConfiguration — navigation applicative globale.
• LgTabContainer — navigation par onglets horizontaux.
• LgSideTabContainer — navigation par onglets latéraux.