代码之家 › 专栏 › 技术社区 › sibert

angular 6的angular material多级菜单?

sidenav angular6

5

sibert · 技术社区 · 7 年前

我试图实现多级sidenav,我发现这符合我的要求:

angular-material-multilevel-menu

Demo -注意手风琴的类型

不幸的是,这是为AngularJS(1.0?)创建的,这似乎不适用于6。

我的问题是:

Angular 6还有其他多级sidenav组件吗?你在谷歌上发现了任何类似的东西。
是否可以将Angular 1.0菜单“升级”到Angular 6?怎样
有没有简单的指导或课程来建立你自己的多级侧导航?一个级别有很多说明,但我没有发现多个级别的说明。

4 回复 | 直到 7 年前

1

5

PierBJX 7 年前

我不知道你们是否还在寻找棱角材料,但我找到了ShankyTiwari制作的。以下是 GitHub 以及 demo .

非常易于使用和实施。例如,我在一个侧栏中实现了它,因为它不存在角度材质。如果不是的话,一个替代方案将如@Dino所说的那样启动。

2

Dino 7 年前

Angular Material 6.0没有现成的多级菜单。你必须自己创造它。这将是两个方面的结合 Nested Menu 和 Side Nav .

为了回答你的第一个问题,我建议你看看 PrimeNG's Panel Menu .它能完全满足你的需求,只需稍加努力,你也能将它的设计变成像这样的材料。(我使用了一些打底组件,因此我可以确认它是否有效。

请考虑到Priming 6.0.0目前正在使用中 Alpha-2 version .

3

1

sibert 7 年前

我找到了解决方案的一部分。

Here is a demo using "mat-expansion-panel"

还有一些问题需要解决。

扩展级别的阴影和偏移
关闭而不是保持选中状态
更好的方法?

有什么建议吗?

4

0

Majdi Al-Sharif 6 年前

我想用原生的棱角材料创建多级菜单,但ng material团队仍在开发中。所以,我建议使用 ng-material-multilevel-menu 以下是目前的套餐:

npm install --save ng-material-multilevel-menu 或 yarn add --save ng-material-multilevel-menu
然后导入 NgMaterialMultilevelMenuModule 通过

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 { }

呼叫 <ng-material-multilevel-menu [configuration]='config' [items]='appitems' (selectedItem)="selectedItem($event)"></ng-material-multilevel-menu> 在你的html中。
最后,宣布 appitems 为您的列表项和 config 对象

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

如果链接属性可用,将使根项目可链接。