如何主题化角材料更紧凑

Question

我正在使用Angular Material 7，并找到mat-form-field等的装订线间距。等太大。在桌面上，信息密度非常低。 我想使用主题进行调整，但是Google仅引导我学习描述如何更改颜色的教程。有人在不调试数十个Material css指令的情况下提供有关如何使间距更紧凑的建议吗？

Answer 1

如果您不想使用CSS作为网格装订线大小，则可以使用具有弹性布局的角度材质，并使用fxLayoutGap =“ 16px或20px”轻松设置装订线大小。 这是链接fxLayoutGap API。

Answer 2

材料设计具有不同的密度级别，Angular团队最终实现了这一点，现在它已成为Angular 10 release中的一项实验功能。

Answer 3

您可以像这样在主题定义中设置密度级别：

$app-light-theme: mat-light-theme((
  color: (
    primary: $mat-primary-palette,
    accent: $mat-accent-palette
  ),
  density: -3
));

见：https://material.angular.io/guide/theming-your-components#3-include-the-theme-mixin-in-your-application