属性列表的角度材料组件？

Question

我想在 Angular 中使用 Material Design 实现响应式属性列表。

类似这样的：

如果屏幕变小，标签会出现在值上方。

我可以自己构建一些东西，但我认为这是一个常见问题。显示这些的正确材料/角度方式是什么？

Answer 1

好吧，最后我自己做了。我最终使用了DL 定义列表，因为它使用DT/DD 类型/详细信息最能捕获键值语义。

对于 CSS（这是我的 SCSS 的一部分），主要的要点是使用 grid 和 grid-column-start

DL {
  font-family: "Roboto", Arial, sans-serif;
  display: grid;
  grid-template-columns: max-content auto;
  padding-left: 24px;
}

DT {
  color: #777;
  display: inline-block;
  grid-column-start: 1;
  padding: 2px 20px 10px 0px;
  margin: 0px;
  @include text-extra-small($color-grey-600);
}

DD {
  display: inline-block;
  grid-column-start: 2;
  font-size: 16px;
  color: #333;
  margin: 0px;
  padding: 0px 0px 10px;
  @include text-body($color-grey-800);

}
@include for-mobile {
  DD {
    grid-column-start: 1;
  }
}