如何使有角度的材料 sidenav 出现在主视图上? [英] How to make angular material sidenav appear over main view?

问题描述

我有一个有角度的材质 sidenav，当我单击菜单图标时，sidenav 在左侧打开，但它会推动主视图，但如果我单击菜单按钮，它应该在主视图上方打开.

I have an angular material sidenav, when I click menu icon, a sidenav opened on the left side but it pushes the main view but if I click the menu button it should open above the main view.

我已经添加了我想要的样子的图片.我该怎么做?

I have added pictures of what I want it to look like. How can i do this?

演示

推荐答案

您可以将 mode 更改为 over 为:

You can change mode to over as:

<mat-drawer-container>
    <mat-drawer #snav [mode]="'over'"> <=== change it here
        ...
    </mat-drawer>

    <mat-drawer-content>
        ...
    </mat-drawer-content>
</mat-drawer-container>

更新 1:

您可以将 mat-sidenav 用于您想要的输出.不要忘记检查 CSS.

You can use mat-sidenav for your desired output. Don't forget to check CSS.

此处您可以找到代码.

这篇关于如何使有角度的材料 sidenav 出现在主视图上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！