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

Вот способ оформления mat-menu или его пунктов меню. Это просто витрина. Пожалуйста, используйте свой собственный 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 ; 
} 

Answer 2

если это угловой компонент меню материала? А если ты хочешь решить это css? тогда попробуйте

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