【问题标题】:Angular Material component for list of properties?属性列表的角度材料组件?
【发布时间】:2022-01-05 15:28:12
【问题描述】:

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

类似这样的:

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

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

【问题讨论】:

标签: css angular angular-material material-design key-value


【解决方案1】:

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

对于 CSS(这是我的 SCSS 的一部分),主要的要点是使用 gridgrid-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;
  }
}

【讨论】:

    猜你喜欢
    • 2018-08-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-03-23
    • 2018-04-26
    • 2019-06-16
    相关资源
    最近更新 更多