Angular 2材质自定义md菜单

我是Angular 2 Material的新手，我试图自定义md菜单组件的样式。Angular 2材质自定义md菜单

<md-icon class="material-icons" [mdMenuTriggerFor]="menu">dehaze</md-icon> 
<md-menu #menu="mdMenu" [overlapTrigger]="false"> 
    <button md-menu-item>Item 1</button> 
    <button md-menu-item>Item 2</button> 
</md-menu>

预定义的样式设置正常工作（例如，设置菜单不重叠的），但我想设置的MD-菜单宽度为100％，并有MD-图标按钮之间的空间不大，这扩大了菜单，我不能这样做predefined directives from Angular 2 Material。

到目前为止，我用/ deep/css命令找到了一个解决方案，但是我看到主要浏览器不支持该命令。

什么是自定义Angular 2 Material组件的好方法？我如何设计我的md菜单，使它具有100％的宽度以及它的扩展按钮之间有一定的空间？

为了说明什么我谈论： Draft of the menu

来源

2017-07-27 Polarfox

你可以通过自定义的类菜单。

<md-menu #menu="mdMenu" [overlapTrigger]="false" class="my-full-width-menu">

然后，您可以使用全局样式来定位该类。

您的需求，不幸的是，你需要了解您的菜单重叠放置一些信息，并进行硬编码一些重新定位

.mat-menu-panel.my-full-width-menu { 
    max-width: none; 
    width: 100vw; 
    margin-left: -8px; 
    margin-top: 24px; 
}

Plunker Demo

的权办法做到这一点是使用材质的OverlayModule创建一个自定义叠加组件（当前位于材质包中，但很快将移至cdk）。

来源

2017-07-27 16:21:11

谢谢，您的解决方案为我工作。我还有两个问题：为什么你知道你需要使用“.mat-menu-panel”？我没有在Angular Material文档中看到这个名字。是否有可能在app.component.css而不是全局styles.css中定义该类？我试过了，但它似乎工作，当代码部分是全局styles.css。 – Polarfox

我想通过在打开菜单后检查DOM来使用'.mat-menu-panel'。我不确定课堂会在哪里添加，所以我不得不进去找到它。使用至少两个选择器是很重要的，以便更具体地说明原始的.mat菜单面板样式。还可以确定，你可以在你的app.component.css中定义这些样式，但是你必须在你的组件中将ViewEncapsulation设置为None。这是因为菜单面板是md-menu组件的直接子项，而不是您的应用程序组件！ –

在Angular中，ViewEncapsulation.Emulated是默认选项，这意味着它会尝试通过向主机元素添加代理键来缩小影响的范围等。一个选项可能是在css下面添加。但是，请注意，这个深度也很快就会被弃用。必须等待才能知道替代方案！ https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

::ng-deep .mat-menu-panel { 
    max-width: none!important; 
    min-width: 400px!important; 
}

来源

2017-12-05 00:41:07 nsk

Angular 2材质自定义md菜单

回答

相关问题