Próbowałem osiągnąć wielopoziomowy Sidenav i znalazłem to, co spełnia moje wymagania:

Menu kątowe-Multilevel

Demo - Zwróć uwagę na akordeon rodzaj

Niestety jest to stworzone dla AngularJs (1.0?), Który wydaje się, że nie działa w kątach 6.

Moje pytania to:

  1. Czy jest jakiś inny multilevel Sidenav składnik do kątowej 6? Uwaga znalazł podobny w Google, który działa.
  2. Czy możliwe jest "Uaktualnienie" Ten menu kątowe do kątowej 6? W jaki sposób?
  3. Czy istnieją wszelkie proste instrukcje lub kursy, aby zbudować własną multilevel boczną nawigację? Istnieje wiele instrukcji dla jednego poziomu, ale znalazłem Brak wielopoziomowy.
5
sibert 4 czerwiec 2018, 09:12

3 odpowiedzi

Najlepsza odpowiedź

Nie wiem, czy nadal szukasz menu kątowego-modułu-Multilevel, ale znalazłem jeden wykonany przez Shankytiwari. Oto link do Github i link do Demo.

Bardzo łatwy w użyciu i do wdrożenia. Na przykład wdrożyłem go na pasku bocznym, ponieważ nie istnieje z materiałem kątowym. Jeśli nie alternatywa byłaby primenga, jak powiedział @dino.

8
PierBJX 14 czerwiec 2018, 18:31

Materiał kątowy 6.0 nie jest wyposażony w menu wielopoziomowe z pudełka. Musisz go stworzyć samodzielnie. Byłoby to połączenie Menu zagnieżdżone i Side NAV.

I odpowiedzieć na swoje pierwsze pytanie, sugerowałem, abyś spojrzeć na Menu panelu Primenga . Robi dokładnie to, czego potrzebujesz, a z niewielkim wysiłkiem, będziesz też w stanie zmienić to projekt w materiale. (Zrobiłem to z pewnymi elementami Primeng, więc mogę potwierdzić, że działa.

Proszę wziąć pod uwagę, że Primeng 6.0.0 jest obecnie w Wersja alfa-2.

3
Dino 4 czerwiec 2018, 10:26

Chciałam tworzyć menu wielopoziomowe z rodzimym materiałem kątowym, ale nadal w rozwoju zespołu materiału NG. Chciałbym więc sugerować użycie NG-Material-Multilevel-Menu Pakiet na razie postępuj zgodnie z poniższym:

  1. npm install --save ng-material-multilevel-menu lub yarn add --save ng-material-multilevel-menu
  2. Następnie importuj NgMaterialMultilevelMenuModule przez
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
/* Import the module*/
import { NgMaterialMultilevelMenuModule } from 'ng-material-multilevel-menu';
 
import { AppComponent } from './app.component';
 
@NgModule({
    declarations: [
    AppComponent
    ],
    imports: [
    BrowserModule,
    NgMaterialMultilevelMenuModule // Import here
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
  1. Zadzwoń <ng-material-multilevel-menu [configuration]='config' [items]='appitems' (selectedItem)="selectedItem($event)"></ng-material-multilevel-menu> w swoim HTML.
  2. Wreszcie, deklaruj appitems dla elementów listy i obiekt {x1}}
appitems = [
    {
        label: 'NPM',
        icon: 'favorite',
        link: 'https://www.npmjs.com/package/ng-material-multilevel-menu',
        externalRedirect: true
    },
    {
        label: 'Item 1 (with Font awesome icon)',
        faIcon: 'fab fa-500px',
        items: [
            {
                label: 'Item 1.1',
                link: '/item-1-1',
                faIcon: 'fab fa-accusoft'
            },
            {
                label: 'Item 1.2',
                faIcon: 'fab fa-accessible-icon',
                items: [
                    {
                        label: 'Item 1.2.1',
                        link: '/item-1-2-1',
                        faIcon: 'fas fa-allergies'
                    },
                    {
                        label: 'Item 1.2.2',
                        faIcon: 'fas fa-ambulance',
                        items: [
                            {
                                label: 'Item 1.2.2.1',
                                link: 'item-1-2-2-1',
                                faIcon: 'fas fa-anchor',
                                onSelected: function() {
                                    console.log('Item 1.2.2.1');
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        label: 'Item 2',
        icon: 'alarm',
        items: [
        {
            label: 'Item 2.1',
            link: '/item-2-1',
            icon: 'favorite'
        },
        {
            label: 'Item 2.2',
            link: '/item-2-2',
            icon: 'favorite_border'
        }
        ]
    },
    {
        label: 'Item 3',
        link: '/item-3',
        icon: 'offline_pin',
        onSelected: function() {
            console.log('Item 3');
        }
    },
    {
        label: 'Item 4',
        link: '/item-4',
        icon: 'star_rate',
        hidden: true
    }
];

  config = {
    paddingAtStart: false,
    classname: 'my-custom-class',
    listBackgroundColor: '#fafafa',
    fontColor: 'rgb(8, 54, 71)',
    backgroundColor: '#fff',
    selectedListFontColor: 'red',
    interfaceWithRoute: true
  };
interfaceWithRoute
3
Majdi Al-Sharif 1 listopad 2018, 13:58