Un angulaires-le matériel-la multi-menu Angulaire 6?

J'ai essayé de réaliser un multi-niveaux sidenav et j'ai trouvé ce qui répond à mes exigences:

angulaires-le matériel-la multi-menu

Démo - Note de l'accordéon type

Malheureusement c'est créé pour AngularJS (1.0?), qui semble ne pas fonctionner dans Angulaire 6.

Mes questions sont:

  1. Est-il un autre multiniveau sidenav composante Angulaire 6? N'ont trouvé de similaire sur Google qui fonctionne.
  2. Est-il possible de "mise à niveau" de ce Angulaire 1.0 menu Angulaire 6? Comment?
  3. Est-il de simples instructions ou des cours pour construire votre propre multiniveau côté de nav? Il y a plusieurs instructions pour un niveau, mais je n'en ai trouvé aucun multi-niveau.
  • Bonjour. Vos questions 1 et 3 ne rentre pas dans le débordement de la pile, car ils sont sur de trouver des outils et des tutoriels. Voir le liste. Pour la deuxième, bien sûr, il est, mais vous aurez probablement besoin d'effectuer de nombreux changements majeurs dans la code source. Trop vaste pour être couvert par une seule et unique réponse ici...
  • Motard, je vais poster un exemple que j'ai trouvé par accident. J'espère que vous pourrez donner quelques indices sur mes autres questions.
InformationsquelleAutor sibert | 2018-06-04
  1. 4

    Je ne sais pas si vous êtes toujours à la recherche pour angulaires-le matériel-la multi-menu, mais j'ai trouvé celle faite par ShankyTiwari.
    Voici le lien pour GitHub et le lien pour le démo.

    Très facile à utiliser et à mettre en œuvre. Par exemple, j'ai mis en place dans une barre latérale, car il n'existe pas Angulaire du matériel.
    Sinon une autre solution serait PrimeNG comme @Dino dit.

    • Toujours à la recherche. J'ai réussi à obtenir le même look que ShankyTiwari par des modules standard. Mais encore peu de succès réglage backgrund couleurs. Pouvez-vous contrôler l'arrière-plan / couleurs sélectionnées dans son module?
    • Oui vous pouvez, si vous définissez la configuration. Jetez un oeil à la rubrique API sur GitHub github.com/ShankyTiwari/ng-material-multilevel-menu#api
    • Merci beaucoup @PierBJX, Ce lien est très utile et correspond exactement à ma demande..
    InformationsquelleAutor PierBJX
  2. 2

    Angulaire Matériel 6.0 ne vient pas avec multi-niveaux de menu de la boîte. Vous devez créer sur votre propre. Il serait une combinaison de Imbriquée Menu, et Côté Nav.

    Et pour répondre à votre première question, je vous suggère de jeter un oeil à PrimeNG du Menu du Panneau. C'est exactement ce dont vous avez besoin et avec un peu d'effort, vous serez également en mesure de modifier la conception de Matériel comme. (Je l'ai fait avec certains PrimeNG des composants, donc je peux confirmer que cela fonctionne.

    Veuillez prendre en considération que PrimeNG 6.0.0 est actuellement en
    Alpha-2 version.

    • Comme je interpréter ce, est nichée Menus s'affichent à droite, mais il y a une propriété "direction: Direction". Avez-vous des exemples de l'expansion de deuxième niveau au-dessous du premier niveau? Et je ne trouve pas d'exemples de PrimNG que "SLIDEmenu" ce qui est agréable, mais pas mon premier objectif.
    InformationsquelleAutor Dino
  3. 1

    Un angulaires-le matériel-la multi-menu Angulaire 6?

    J'ai trouvé une PARTIE de la solution.

    Voici une démo à l'aide de "mat-expansion du panneau"

    Il ya encore quelques problèmes qui doivent être résolus.

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

    Des suggestions?

    InformationsquelleAutor sibert
  4. 0

    J'ai été à la recherche pour créer des multi-niveau des menus avec des natifs angulaire du matériau, mais encore en cours de développement par ng le matériel de l'équipe. Donc, je voudrais suggérer d'utiliser ng-matériel-multiniveaux-menu package pour l'instant par suivre ci-dessous:

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

    JS:

    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. Appel <ng-material-multilevel-menu [configuration]='config' [items]='appitems' (selectedItem)="selectedItem($event)"></ng-material-multilevel-menu> dans votre code html.
    2. Enfin, déclarer appitems pour la liste de vos éléments et config objet

    JS:

    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 à être couplés si le lien de propriété est disponible.

    InformationsquelleAutor Majdi Al-Sharif