Card

Card コンポーネントを使用して、画像、マップ、その他のメディアコンテンツ、およびテキストを介して単一のオブジェクトの情報を表示し、共有、「いいね」、ブックマークなどの関連するクイック操作をトリガーできます。これは通常、より詳細な情報の概要およびエントリポイントとして機能します。さまざまなコンテンツとレイアウトのカードを組み合わせて、ダッシュボードを作成できます。Card は、Ignite UI for Angular Card コンポーネントと視覚的に同じものです。

Card のデモ

領域

Card には 4 つの異なる領域があります: 画像またはマップメディアを表示する上部の image (画像)、サムネイル Avatar、Title、Subtitle の組み合わせを保持する header (ヘッダー)、Card の詳細を示すテキスト段落を保持する body (本文)、および Card に関連するクイック操作を備えたツールバーとして機能する actions (操作) です。


image
header
body
actions

画像と本文

画像と本文の Card 領域は、11 のオーバーライドの同じコレクションをサポートします: 人口の多い世界領域の 6 つの大陸地図、1 つの World Map、1 つの Navigation Map、および連絡先、画像、簡単な説明テキストの Paragraph などのショートカットの配列です。

ヘッダー

Card ヘッダーは、Avatar Thumbnail、Title、および Subtitle 要素を含むさまざまなレイアウトをサポートします。Sketch では、非表示にする要素を ~No Symbol に設定すると、スマートレイアウトルールによってレイアウトが調整されます。Adobe XD では、Stack を使用することで、不要なレイヤーを削除するときに同じ結果を実現できます。

操作

Card 操作には、6 つの異なるレイアウトがあります: 2 つの Flat Button と 3 つの Icon を備えた Button + Icon Actions、その逆に配置された逆 Icon + Button Actions、それらの Justified~ バリアントおよび Justified Button Actions と Justified Icon Actions のみを備えたバリアントです。6 つはそれぞれ Sketch の Smart Layout でオーバーライドとして定義されており、要素を ~No Symbol に設定して要素を削除し、残りを自動的に目的のレイアウトに調整できます。Adobe XD でも同様の機能が利用でき、Stack を使用することでレイアウトが自動的に調整されるため、不要なレイヤーを削除することもできます。

Card レイアウト

Sketch のスマートレイアウトおよび Adobe XD の Stack を使用することにより、Card は特定の領域または要素を除外してさまざまなレイアウトを作成し、最初は同じコンポーネントに基づいてさまざまな異なるカードをサポートできます。

スタイル設定

Card には、画像、ヘッダー、本文、およびテキストスタイル、アイコンタイプ、色などの操作領域のオプションやボタン色および Card の背景色の選択などスタイル設定に柔軟性があります。

使用方法

Card は通常、概要 UI および詳細情報のエントリポイントとして機能します。情報が多すぎて目詰まりしないようにします。ダッシュボードを作成するときは、カードを常にサイズ変更しながら配置し、カード間の水平と垂直のギャップを均等にしてレイアウトグリッドを形成します。

良い例	悪い例