Question

我使用角度素材作为ui组件，并按照以下教程创建我自己的页面。

https://stackblitz.com/angular/pbndqaomepr?file=app%2Fmenu-overview-example.html

当我点击菜单时，angular显示一个包含第1项和第2项的div，大屏幕就可以了。我试图做的是确保div扩展到完整的浏览器窗口以防万一移动设备。

所以我添加了以下css：

@media only screen and (max-width: 600px) {
  .menu-screen {
    position: fixed;
    width: 100vw;
    height: 100vh
  } 
}

使用以下菜单模板：

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" class="menu-screen">
   <button mat-menu-item>Item 1</button>
   <button mat-menu-item>Item 2</button> 
</mat-menu>

没有任何反应。

我需要matMenu项目来覆盖整个monile屏幕。我做错了什么？我的一个朋友建议听取菜单项打开事件并显示填充窗口的弹出窗口。但是，我觉得这很麻烦。

由于

Answer 1

首先，您需要为整个文档应用该CSS代码，或者如果将CSS保留在组件中，则需要将组件的封装模式设置为NONE。因为菜单是在叠加容器中创建的，所以它是body元素的子元素，而不是组件的子元素。

第二，棱角分明的材料创建了几个容器，用于封装菜单，并且它们的位置需要覆盖。

因此，在您的menu-overview-example.css文件中，输入以下代码：

.cdk-overlay-connected-position-bounding-box {
  left: 0 !important;
}
@media only screen and (max-width: 600px) {
  .menu-screen {
    position: fixed;
    max-width: unset !important;
    width: 100vw;
  } 
}

，然后在menu-overview-example.ts文件中，将其添加到组件装饰器中：

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

我在这里创建了代码的分叉工作版本： https://stackblitz.com/edit/angular-sjy3em

您可能希望使选择器更具体，以便可以从代码中删除！important指令，这是不明智的做法，但我在这里使用它是为了简化。

角度材质导航栏菜单扩展为全屏

1 个答案: