更改工具栏高度 material 设计

Question

如何在 material 设计中更改 md-toolbar 的高度？

http://jsfiddle.net/kostonstyle/gsroofa5/

在第一个工具栏上，我想要一个 30px 的高度并尝试过：

<md-toolbar style:"height: 30px;">

但它根本不起作用。我需要一个有两个块的导航栏，因为有两个工具栏。

我试试这个，但现在字母消失了。

http://jsfiddle.net/kostonstyle/r178sp9o/1/

Answer 1

可以通过将类添加到 md-toolbar 来更改工具栏的高度。

对于中等大小的工具栏添加 class="md-medium-tall"

对于比正常大的工具栏添加class="md-tall"

您还可以内联样式工具栏style="height:50px;"

Answer 2

您可以使用这样的内联样式

<md-toolbar style="min-height:30px">

使用最小高度使工具栏变小

Answer 3

如果只设置 min-height 不起作用，就像它对我不起作用一样，您还必须添加具有相同值的 max-height：

HTML

<md-toolbar class="toolbar"></md-toolbar>

CSS

.toolbar {
  max-height: 30px;
  min-height: 30px;
}

Answer 4

已接受的答案对我不起作用。以下是我如何在我的 Angular Material 应用程序中使用它：

<mat-toolbar color="primary"
     style="min-height: 30px !important; height: 30px !important;">

Answer 5

这对我有用 Angular 8. 将此代码放入您的 scss

.mat-toolbar {
  min-height: 50px !important; 
  height: 50px !important;
}

.mat-toolbar-row {
  min-height: 50px !important; 
  height: 50px !important;
}

将'mat'替换为'md'

更改工具栏高度 material 设计

Change height of toolbar material design

angularjs

angular-material