在 Angular Material 中生成密度是什么意思？答案

【问题标题】：What does it mean to generate density in Angular Material?在 Angular Material 中生成密度是什么意思？
【发布时间】：2020-10-24 11:19:59
【问题描述】：

Angular Material source code 有这个属性：

// Whether density should be generated by default.
$_mat-theme-generate-default-density: true !default;

Angular Material 生成密度是什么意思？一个简单的 CSS 示例说明它会很棒。

【问题讨论】：

有趣的问题——我自己在任何地方都找不到它实际使用过。
是的，源代码中有一点提示：最近重构了主题 // 系统以允许密度和排版配置

标签： css angular sass angular-material

【解决方案1】：

遵循材料设计规范。 Angular Material 正在实现配置density of components 的功能。

密度的平均值是关于使组件更容易找到、优先操作并使其更可见。查看更多关于Material design density usage

对于简单的 css 示例，它可以是一个框列表，并且它通过视口变化而变化。

运行代码 sn-p 并更改窗口视口大小。

.container {
  display: flex;
  flex-direction: column;
}

.box {
  box-sizing: border-box;
  padding: 10vh 5vw;
  margin: 5px;
  background-color: #ccc;
  width: 100%;
}

<div class="container">
 <div class="box">1</div>
 <div class="box">2</div>
 <div class="box">3</div>
</div>

【讨论】：

如果有一些关于如何实际使用它的文档，那就太好了，因为 Material 已经发布了用于浏览器的密度 api 的测试版。但是文档很糟糕，真的不清楚如何让它在组件模板中工作。