Angular 7 - как стилизовать меню материалов, чтобы элементы были сжаты ближе друг к другу
Я новичок в 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 по умолчанию для компонентов навигации и кнопок для управления их размерами и внешним видом, предоставьте инструкции или ссылку. Спасибо.
Ответы 2
если это угловой компонент меню материала? А если вы хотите решить это с помощью css? тогда попробуй это
.mat-menu-item{
line-height: 20px;
height: 20px;
}
как line-height, так и height помогут вам достичь этого, или, как упомянул @Mihaylov, вы можете использовать menu-item как дисплей flex и вертикальное выравнивание с помощью align-items или align-content. Лично мне понравился line-height, поскольку это единственное свойство, и мне не нужно беспокоиться о том, что делают другие свойства.
Вот способ стилизации мат-меню или его пунктов меню. Это просто витрина. Пожалуйста, используйте свой собственный 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 ;
}
Спасибо. Это работает - с комбинацией ответа от: imon
Спасибо. Это работает с комбинацией ответа от: Михайлов