Aller au contenu principal

LgMenuSeparator

LgMenuSeparator insère un trait de séparation dans le menu pour isoler visuellement des groupes d'actions. Le composant rend uniquement le séparateur ; utilisez LgMenuTitle si vous avez besoin d'un libellé visible.

<LgMenuSeparator />
  • Espace de noms : Lagoon.UI.Components
  • Hérite de : LgCustomMenuItem → LgAriaComponentBase → LgComponentBase
  • Package NuGet : Lagoon.UI
Clarifier les groupes

Ajoutez un séparateur avant une famille d'actions moins fréquentes, comme l'aide, l'administration ou la déconnexion.

Utilisation​

Séparer deux groupes dans la sidebar​

Utilisez LgMenuSeparator entre deux familles d'actions. Le paramètre Text existe, mais le rendu actuel du composant ne l'affiche pas.

MenuConfiguration.razor
<LgMenuConfiguration>
    <Sidebar>
        <LgMenuItem Text="#Dashboard" IconName="@IconNames.Home" Uri="dashboard" />
        <LgMenuItem Text="#Orders" IconName="@IconNames.All.Cart3" Uri="orders" />

        <LgMenuSeparator />

        <LgMenuItem Text="#Documentation" IconName="@IconNames.Question" Uri="help/documentation" />
        <LgMenuItem Text="#ContactSupport" IconName="@IconNames.All.Envelope" Uri="help/contact" />
    </Sidebar>
</LgMenuConfiguration>

Séparer dans un groupe réutilisable​

Le séparateur peut être déclaré dans un LgMenuSet pour conserver la même structure partout où le groupe est inclus.

MenuConfiguration.razor
<LgMenuConfiguration>
    <MenuSetDeclarations>
        <LgMenuSet Id="account-menu">
            <LgMenuItem Text="#Profile" IconName="@IconNames.All.PersonCircle" Uri="account/profile" />
            <LgMenuItem Text="#Preferences" IconName="@IconNames.Admin" Uri="account/preferences" />
            <LgMenuSeparator />
            <LgMenuItem Text="#Logout" IconName="@IconNames.Logout" Uri="logout" />
        </LgMenuSet>
    </MenuSetDeclarations>

    <Menu>
        <LgIncludeMenuSet Id="account-menu" />
    </Menu>
</LgMenuConfiguration>

Ajouter une séparation avant un seul item​

Si vous devez seulement isoler une entrée, LgMenuItem expose aussi HasSeparator. Gardez LgMenuSeparator pour les séparations structurantes ou titrées.

MenuConfiguration.razor
<LgMenuConfiguration>
    <Toolbar>
        <LgMenuItem Text="#Settings" IconName="@IconNames.Admin" Uri="settings" />
        <LgMenuItem Text="#Help" IconName="@IconNames.Question" Uri="help" HasSeparator="true" />
    </Toolbar>
</LgMenuConfiguration>

Propriétés​

NomTypeDéfautDéclaré dansDescription
TextstringnullLgMenuSeparatorParamètre existant, non rendu par le markup actuel du séparateur.
AriaLabelstringnullLgAriaComponentBaseValeur de l'attribut aria-label.
AriaLabelledBystringnullLgAriaComponentBaseValeur de l'attribut aria-labelledby.

Accessibilité​

  • N'utilisez pas le séparateur comme seul moyen de compréhension ; le groupe doit rester cohérent par ses libellés.
  • Pour afficher un libellé de groupe, utilisez plutôt LgMenuTitle avec une clé #.

Composants liés​