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

问题描述

我是 Angular 2 Material 的新手，我正在尝试自定义 md-menu 组件的样式.

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>

预定义的样式设置工作正常(例如将菜单设置为非重叠)，但我想将 md-menu 设置为 100% 宽度并在 md-icon 按钮之间留出一点空间，以扩展菜单，我无法使用 来自 Angular 2 Material 的预定义指令.

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.

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

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.

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

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?

为了说明我在说什么:菜单草稿

推荐答案

您可以将自定义类传递给菜单.

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

执行此操作的正确方法是使用材料的 OverlayModule(当前在材料包中，但很快将移至 cdk)创建自定义叠加组件.

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-menu的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！