web-dev-qa-db-ja.com

マテリアルデザインを含むKey-Valueリストを表示する最良の方法は?

「マテリアルデザイン」プロジェクトの場合、次のような複数のアイテムを含むKey-Valueリストを表示する必要があります(動物と4つの基準の例):

  • 名前:猫
  • カテゴリー:哺乳類
  • 色:黒
  • サイズ:小

キーと値の明確な違いを見たいのですが。

しかし、Key-Valueリストのアイデアを提供する仕様には何も見つかりません: https://material.io/guidelines/components/lists.html

値のシーケンスのみを表示するリスト、または最初の黒のテキストの後に2番目の灰色のテキスト(前のテキストを指定)が続くリストのみがあります。

マテリアルデザインを含む明確で美しいKey-Valueリストを投稿してください。

ありがとう!

11
Baptiste

厳密なキー値リストが必要な場合は、 データテーブルガイドライン が最も適しています。 1つの列を他の列の上に引き出すには、太字にするか、少し淡い灰色にします(ただし、淡い灰色ではありません。読みやすくする必要があります)。

ただし、ほとんどの状況では、各要素の表示方法を慎重に検討することが最も効果的です。

いくつかのアイデア:

Contact page

  1. 名前と住所「John Doe」、「Seattle、WA」がラベルを必要としない方法をご覧ください。代わりに、その意味と重要性は、コンテンツ、レイアウト、およびタイポグラフィから明らかです。キーと値のペアの一部を、正しいタイポグラフィとレイアウトでに変換できるかどうかを検討します。

  2. 電話領域、電子メール領域、および場所領域でアイコンがラベルとしてどのように使用されているかを確認します。キーがiconsに簡単に変換できる場合は、これが解決策になる可能性があります。

  3. 電話番号と電子メールの下に薄い灰色のラベルがあることに注意してください。次のような2行のレイアウトを考えてみてください。他の行は、カテゴリを小さくて明るいテキストで表示します。

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

1つのオプションは、mat-card-content内でtableを使用することです。各行に2つのセルがあり、1つはキー用で、もう1つは値とスタイル設定用です。

0