如何在Angular材质7上创建大型菜单

时间:2018-11-12 02:24:38

标签: angular angular-material mdbootstrap

我已使用以下代码使用角形材质7创建工具栏和菜单。我需要在角形材质中创建大型菜单。

<mat-toolbar color="primary" class="example-toolbar">
    <mat-toolbar-row style="height: 28px !important;">
            <div class="div-center">
                <button mat-flat-button color="primary" [matMenuTriggerFor]="menu">
                    <mat-icon>directions_car</mat-icon>
                    Cars
                </button>
                <mat-menu #menu="matMenu">
                    <button mat-menu-item>Item 1</button>
                    <button mat-menu-item>Item 2</button>
                </mat-menu>
            </div>
        </mat-toolbar-row>
</mat-toolbar>

我正在寻找一个像这样的大型菜单https://mdbootstrap.com/docs/jquery/navigation/mega-menu/

谁能知道我如何创建上面的超级菜单。

2 个答案:

答案 0 :(得分:0)

您需要稍微调整 mat-menu 组件,并构建自己的组件以制作大型菜单组件。

否则,没有直接的方法来配置材料。

SIMPLE DEMO

答案 1 :(得分:0)

Angular 2 Material Customize md-menu

.mat-menu-panel .custom {
  background-color: darkgrey;
  border-radius: 0px;
}

https://github.com/angular/material2/issues/10322