Angular 2 Material自定义md菜单 [英] Angular 2 Material Customize md-menu

问题描述

 < p< p>< ; md-icon class =材料图标[mdMenuTriggerFor] =菜单> dehaze< / md-icon> 
< md-menu＃menu =mdMenu[overlapTrigger] =false> 
<按钮md-menu-item>项目1< /按钮> 
<按钮md-menu-item>项目2< /按钮> 
< / md-menu> 
  

预定义的样式设置可以正常工作（例如，将菜单设置为不重叠），但我希望将md-menu设置为100％宽度，并在md-icon按钮之间留有一点空间，这扩大了菜单，这是我无法用 Angular 2 Material的预定义指令。

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

定制Angular 2 Material组件的好方法是什么？我如何设计我的md菜单，使它具有100％的宽度，并在它的扩展按钮之间留出一些空间？

为了说明我在说的是什么：
菜单草稿

 < md- menu＃menu =mdMenu[overlapTrigger] =falseclass =my-full-width-menu> 
  

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

不幸的是，为了您的需要，您需要了解一些关于菜单叠加层位置的信息，以及硬编码某些重定位的信息。

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

Plunker Demo

正确做到这一点的方法是创建一个自定义材质的OverlayModule覆盖组件（当前在材质包中，但很快会移动到cdk）。

I am new to Angular 2 Material and I am trying to customize the style of the md-menu component.

<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>

The predefined style settings work fine (e.g. setting the Menu to non-overlapping), but I would like to set the md-menu to 100% width and have a little space between the md-icon button, that expands the menu, which I can not do with the predefined directives from Angular 2 Material.

So far I found a solution with the /deep/ css command, but I read that the command is not supported by the major browsers any more.

What is a good way to customize a Angular 2 Material component? How could I style my md-menu, so that it has 100% width and some space between it´s expanding button?

To illustrate what I am talking about: Draft of the menu

解决方案

You can pass custom classes to menus.

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

Then you can target that class with global styles.

For your needs, unfortunately, you'll need to know some information about where your menu overlay is positioned, and hardcode some repositioning

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

Plunker Demo

The right way to do this is to create a custom overlay component with material's OverlayModule (current in the material package, but soon to be moved to the cdk).

这篇关于Angular 2 Material自定义md菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！