【问题标题】:An angular-material-multilevel-menu for Angular 6?Angular 6的角度材料多级菜单?
【发布时间】:2018-06-04 06:12:27
【问题描述】:

我尝试实现多级侧导航,发现这符合我的要求:

angular-material-multilevel-menu

Demo - 注意手风琴类型

不幸的是,这是为 AngularJS(1.0?)创建的,这在 Angular 6 中似乎不起作用。

我的问题是:

  1. Angular 6 还有其他多级侧导航组件吗?请注意在 Google 上找到任何类似的有效方法。
  2. 是否可以将此 Angular 1.0 菜单“升级”到 Angular 6?怎么样?
  3. 是否有任何简单的说明或课程来构建您自己的多级侧导航?一级的说明很多,但我没有找到多级的。

【问题讨论】:

  • 你好。您的问题 1 和 3 不适合堆栈溢出,因为它们是关于查找工具和教程的。请参阅topic list。对于第二个,当然可以,但您可能需要在source code 中执行许多重大更改。太宽泛了,这里的一个答案无法涵盖...
  • @Xtreme Biker 我将发布一个我偶然发现的示例。希望你能就我剩下的问题提供一些线索。

标签: angular6 sidenav


【解决方案1】:

我不知道您是否还在寻找 angular-material-multilevel-menu,但我找到了 ShankyTiwari 制作的一个。 这是GitHub 的链接和demo 的链接。

非常易于使用和实施。例如,我在侧边栏中实现了它,因为它不存在于 Angular 材料中。 如@Dino 所说,如果不是替代方案,那就是 PrimeNG。

【讨论】:

  • 仍在寻找。通过标准模块,我设法获得了与 ShankyTiwari 相同的外观。但设置背景颜色的成功仍然有限。你能控制他模块中的背景/选定的颜色吗?
  • 是的,如果您设置了配置,则可以。看看 GitHub 上的 API 部分github.com/ShankyTiwari/ng-material-multilevel-menu#api
  • 非常感谢@PierBJX,这个链接非常有用,完全符合我的要求..
  • 嗨@Sampath,IDK,如果您正在使用其他东西,但以防万一您再次需要创建多级列表或第一次阅读此问题的人,那么您可以使用它在 IE11 中问题#87 现已修复。谢谢
【解决方案2】:

Angular Material 6.0 没有开箱即用的多级菜单。您必须自己创建它。它将是Nested MenuSide Nav 的组合。

为了回答您的第一个问题,我建议您查看PrimeNG's Panel Menu。它完全符合您的需求,并且只需稍加努力,您还可以将其设计更改为类似 Material 的内容。 (我是用一些 PrimeNG 组件做的,所以我可以确认它可以工作。

请注意 PrimeNG 6.0.0 目前在 Alpha-2 version.

【讨论】:

  • 正如我解释的那样,嵌套菜单是否在右侧弹出,但有一个属性“方向:方向”。您是否有任何将第二级扩展到第一级以下的示例?我找不到任何 PrimNG 的例子,而不是“SLIDEmenu”,这很好,但不是我的第一个目标。
【解决方案3】:

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

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

还有一些问题需要解决。

  1. 扩展关卡的阴影和偏移
  2. 关闭而不是保持选中状态
  3. 更好的方法?

有什么建议吗?

【讨论】:

  • 你能添加源代码吗
  • 没有。我已经放弃了 Angular,并且不记得我是怎么做的。现在我使用 Golang 94.237.25.207:8080
【解决方案4】:

我希望使用原生 Angular 材质创建多级菜单,但 ng 材质团队仍在开发中。所以,我想建议现在使用ng-material-multilevel-menu 包,如下所示:

  1. npm install --save ng-material-multilevel-menuyarn add --save ng-material-multilevel-menu
  2. 然后通过
  3. 导入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 { }
  1. 在您的 html 中调用 <ng-material-multilevel-menu [configuration]='config' [items]='appitems' (selectedItem)="selectedItem($event)"></ng-material-multilevel-menu>
  2. 最后,为您的列表项声明appitemsconfig 对象

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 将使根项目可链接。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-02-10
    • 1970-01-01
    • 2020-03-13
    • 2017-08-05
    • 1970-01-01
    • 2019-05-23
    • 2015-12-21
    • 1970-01-01
    相关资源
    最近更新 更多