HTML   发布时间:2022-04-14  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了html – Angular 2 Material自定义md菜单大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我是Angular 2 Material的新手,我正在尝试自定义md-menu组件的样式.
<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-icon按钮之间留出一点空间,这会扩展菜单,我将不能用predefined directives from Angular 2 Material.

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

定制Angular 2 Material组件的好方法是什么?我怎样才能设置我的md菜单样式,以便它有100%的宽度和扩展按钮之间的空间?

为了说明我在说什么:
Draft of the menu

解决方法

您可以将自定义类传递给菜单.
<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)创建自定义叠加组件.

大佬总结

以上是大佬教程为你收集整理的html – Angular 2 Material自定义md菜单全部内容,希望文章能够帮你解决html – Angular 2 Material自定义md菜单所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。