Angular 屬性列表的材料組件？

Question

我想用 Material Design 實現 Angular 中的響應式屬性列表。

像這樣的東西：

如果屏幕變小，標簽會出現在值的上方。

我可以自己構建一些東西，但我認為這是一個常見問題。 顯示這些的正確材料/Angular 方式是什么？

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;
  }
}