web-dev-qa-db-fra.com

Un menu multi-niveaux-matériau-angulaire pour Angular 6?

J'ai essayé de réaliser un Sidenav multiniveaux et j'ai trouvé cela qui répond à mes exigences:

menu multi-niveaux-matériau-angulaire

Démo - Notez le type d'accordéon

Malheureusement, ceci est créé pour AngularJS (1.0?), Qui semble ne pas fonctionner dans Angular 6.

Mes questions sont:

  1. Existe-t-il un autre composant Sidenav à plusieurs niveaux pour Angular 6? Avez-vous trouvé une note similaire sur Google qui fonctionne?.
  2. Est-il possible de "mettre à niveau" ce menu Angular 1.0 à Angular 6? Comment?
  3. Existe-t-il des instructions ou des cours simples pour construire votre propre navigation latérale à plusieurs niveaux? Il existe de nombreuses instructions pour un niveau, mais je n’en ai trouvé aucun à plusieurs niveaux.
angular6sidenav
3
sibert

Je ne sais pas si vous êtes toujours à la recherche d'angular-material-multilevel-menu mais j'en ai trouvé un fabriqué par ShankyTiwari . Voici le lien pour GitHub et le lien pour la demo .

Très facile à utiliser et à mettre en œuvre. Par exemple, je l'ai implémenté dans une barre latérale car il n'existe pas avec le matériau angulaire . Sinon, une alternative serait PrimeNG comme @Dino l'a dit.

3
PierBJX

Matériau angulaire 6.0 ne vient pas avec un menu à plusieurs niveaux de la boîte. Vous devez le créer vous-même. Ce serait une combinaison de Menu imbriqué et Navigation latérale . 

Et pour répondre à votre première question, je vous suggère de consulter le menu du panneau de PrimeNG . Il fait exactement ce dont vous avez besoin et, avec un peu d'effort, vous pourrez également changer sa conception en matériau. (Je l'ai fait avec certains composants PrimeNG, afin de pouvoir confirmer que cela fonctionne. 

Veuillez prendre en compte le fait que PrimeNG 6.0.0 est actuellement dans Version Alpha-2 .

2
Dino

 Demo

J'ai trouvé une partie d'une solution. 

Voici une démonstration utilisant "mat-expansion-panel"

Certains problèmes doivent encore être résolus.

  1. L'ombre et le décalage du niveau d'expansion
  2. L'arrêt au lieu de rester sélectionné
  3. Meilleure façon de faire ça?

Aucune suggestion?

0
sibert

Je cherchais à créer des menus à plusieurs niveaux avec du matériel angulaire natif mais toujours en cours de développement par l'équipe matérielle. Donc, j'aimerais suggérer d'utiliser ng-material-multilevel-menu package pour l'instant en suivant les instructions ci-dessous:

  1. npm install --save ng-material-multilevel-menu ou yarn add --save ng-material-multilevel-menu
  2. Puis importez NgMaterialMultilevelMenuModule par 

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. Appelez <ng-material-multilevel-menu [configuration]='config' [items]='appitems' (selectedItem)="selectedItem($event)"></ng-material-multilevel-menu> dans votre code HTML.
  2. Enfin, déclarez appitems pour les éléments de votre liste et config object

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
  };
Remarque: interfaceWithRoute permettra à l’élément racine d’être lié par des liens si la propriété link est disponible.

0
Majdi Al-Sharif