Angular 7 - 如何设计材质菜单以使项目彼此更接近

Question

我是 Angular 的新手，正在思考如何设计材料设计 (MD) 菜单的样式。 此菜单主要用于桌面应用程序，看起来应该类似于标准桌面应用程序（例如 MS Excel）中的菜单。

我已经搜索了网络，但没有得到明确的答案。

默认情况下，Angular MD 菜单项相距很远——它们之间的间距很大。所以它们看起来像这样（我在这里只使用文本进行可视化）：

Item A1

Item A2 >   Item A2-B1

Item A3     Item A2-B2

etc.        Item A2-B3 >     etc. 

            etc.

我们如何覆盖 MD 默认样式并减少菜单按钮 - 更小的字体、更小的尺寸、没有或最小的间隙，所以我们得到一个小型紧凑的菜单，占用最少的空间并在菜单中安装更多的项目 - 例如：

Item A1
Item A2 >   Item A2-B1
Item A3     Item A2-B2 >     etc. 
etc.        Item A2-B3

示例 menu.component.html 文件：

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

能否请您概述样式，如果有可能修改/配置导航和按钮组件的 MD 默认样式以控制其大小和外观，请提供说明或链接。谢谢。

Answer 1

如果它是角度材质菜单组件？如果你想通过 css 解决它？那就试试吧

.mat-menu-item{
    line-height: 20px;
    height: 20px;
}

Answer 2

这是设置 mat-menu 或其 menu-items 样式的方式。这只是一个展示。请使用您自己的 CSS 来满足您的桌面应用程序的确切需求。希望我对您有所帮助。

menu.component.html

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

menu.component.css

.myMenu { 
  color : red;  

  padding: 0px ;
  margin : 0px; 
  height: auto; 

} 
.myMenuItem { 
  display:  flex;
  color : red;  
  font-size: 10px; 
  padding: auto ;
  margin : auto; 
  height: 30px; 
 align-content: center ; 
     align-items:  center ; 
     align-self: center ; 
}