Comment créer un NavMenu avec un sous-menu collapsible dans une application .Net Core Blazor

Question

Je cherche à créer un navmenu Blazor qui a une forme comme ceci

• élément a

• élément b

quand je clique sur l'élément b, il s'étend avec un sous-menu comme ceci et en cliquant sur les sous-éléments, de nouvelles pages s'ouvrent

• élément a

• élément b

  • sous-élément 1

  • sous-élément 2

J'ai juste édité l'application Blazor d'origine mais sans succès. Le bouton apparaît mais le sous-menu ne se replie pas. Une idée ?

Answer 1

Ne pas utiliser les attributs data-toggle et data-target pour cela.

Ils sont utilisés par boostrap.js cependant vous ne souhaitez pas modifier le DOM de cette manière.

Ce que vous devez faire à la place est d'utiliser une instruction if et laisser Blazor se charger du rendu :

         Récupérer les données

    @if (expandSubNav)
    {

            Sous1

            Sous2

    }

Et ajoutez le champ expandSubNav dans votre section de code :

@code {

    private bool expandSubNav;

}

Answer 2

     Obtenir des données

@if (expandSubNav)
{

        Sub1

        Sub2

}

Utilisez div à la place de NAVLINK. NAVLINK recharge la page et réinitialise expandSubNav.

Answer 3

Ma solution, après des problèmes de non-fermeture lors du clic sur le sous-menu:

fonctionne sur Mobile:

        MyPrgramm

                         Accueil

                         Menu-II

                         Menu III

                    @if (expandSubNavSettings)
                    {

                                     Fetch

                                     Counter

                                     Accueil

                    }

@code {

bool collapseNavMenu = true;

private bool expandSubNavSettings;

string baseMenuClass = "navbar-collapse d-sm-inline-flex flex-sm-row-reverse";

string NavMenuCssClass => baseMenuClass + (collapseNavMenu ? " collapse" : "");

void ToggleNavMenu()
{
    if(!expandSubNavSettings)
    {
        collapseNavMenu = !collapseNavMenu;
    }

}

}

Answer 4

(Résultat final) J'ai eu du mal avec les sous-menus et j'ai fini par utiliser ceci dans mon projet :

    Maître du sous-menu

                 Accueil

                 Menu

        @if (expandMenu)
        {

                     Compteur

                     Récupérer des données

        }

@code {
    private bool collapseNavMenu = true;

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private bool expandMenu;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
        expandMenu = false;
    }

    private void ToggleSubmenu()
    {
        expandMenu = !expandMenu;
    }
}

Answer 5

Vous pouvez essayer cette solution si vous avez plus de sous-menus

    Système

                 Accueil

                 Sous-menu 1

        @if (navSubmenu == NavSubmenu.First)
        {

                     Compteur

                     Obtenir les données

        }

                 Sous-menu 2

        @if (navSubmenu == NavSubmenu.Second)
        {

                     Compteur

                     Obtenir les données

        }

@code {
    private enum NavSubmenu
    {
        None,
        First,
        Second
    }

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
    private NavSubmenu navSubmenu =  NavSubmenu.None;
    private bool collapseNavMenu = true;

    private void ToggleNavMenu(NavSubmenu? submenu = null)
    {
        collapseNavMenu = !collapseNavMenu;
        navSubmenu = submenu ?? navSubmenu;
    }

    private void TogleSubmenu(NavSubmenu submenu)
    {
        if (navSubmenu == submenu)
            navSubmenu = NavSubmenu.None;
        else
            navSubmenu = submenu;
    }
}