it-swarm.cn

用材料设计显示键值列表的最佳方法?

对于“材料设计”项目,我需要显示一个包含多个项目的键值列表,诸如此类(例如,一个动物和四个条件):

  • 名称:猫
  • 分类:哺乳动物
  • 颜色:黑色
  • 尺寸:小

我希望看到键和值之间的明显区别。

但是我在规范中找不到能提供有关键值列表想法的任何东西: https://material.io/guidelines/components/lists.html

仅存在仅显示值序列的列表,或者具有第一个黑色文本后跟第二个灰色文本(指定前一个文本)的列表。

您是否有一个好主意,请在Material Design上发布清晰美观的键值列表?

谢谢!

11
Baptiste

如果需要严格的键值列表,则 数据表准则 最合适。要使一列显示在另一列之上,请随意将其加粗,或将其设置为浅灰色(尽管不是浅灰色-仍然需要可读)。

但是,在大多数情况下,请仔细考虑如何呈现每个元素最有效。

一些想法:

Contact page

  1. 了解名称和地址“ John Doe”,“华盛顿州西雅图”如何不需要标签。相反,其含义和意义从内容,布局和版式上是显而易见的。考虑是否可以使用正确的排版和布局将某些键值对转换为正确的值

  2. 查看电话区域,电子邮件区域和位置区域如何全部使用图标作为标签。如果您的密钥易于转换为图标,则可能是一种解决方案。

  3. 请注意,电话号码和电子邮件的下方如何用浅灰色标记。考虑这样的两行布局,其中另一行以较小,较浅的文本显示类别。

4
Tin Man

我考虑2种选择:卡片或筹码。就筹码而言,我将使左侧部分色彩丰富,这代表键的某些类别,而右侧白色背景黑色值的文本。如果您只有4个类别,我可能会选择左侧背景为基色的芯片,右侧背景为黑色文本的芯片。

例如:代替“ C”,输入“颜色:”或其他类别

enter image description here

https://material.io/guidelines/components/cards.htmlhttps://material.io/guidelines/components/chips.html

1
Lukas Liesis

一种选择是在mat-card-content中使用table。每行中有两个单元格,一个用于键,另一个用于值加一些样式。

0
The_Cute_Hedgehog