Card

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

Card のデモ

領域

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


image
header
content
actions

画像

画像の領域は、9 つのバリアントのコレクションをサポートします - 世界の人口密集領域用の 6 つの大陸地図、1 つの World Map、1 つの Navigation Map、および Image です。

ヘッダー

Card ヘッダーは、Avatar Thumbnail、Title、および Subtitle 要素を含むさまざまなレイアウトをサポートします。Figma では、自動レイアウトは、サイドパネルから選択された header 要素のプロパティに基づいてカードレイアウトを調整します。

コンテンツ

コンテンツは、短い説明テキストの Paragraph (段落) と、Contacts (連絡先) などのショートカットの Array をサポートしています。

操作

Figma では、Card 操作は 4 つの異なるレイアウトで提供されます: Buttons + Icons (ボタン + アイコン)、両方とも 2 つのフラットボタンと 3 つのアイコンを含む逆の Icons + Buttons (アイコン + ボタン)、および Only Buttons (ボタンのみ) と Only Icons (アイコンのみ) のバリアント。すべてのレイアウトには、要素が均等な間隔で配置され、応答性の高い動作のための制約が設定されて構築されることを保証する Justified バリアントがあります。その他の 4 つは自動レイアウトを使用して自動レイアウト調整を行います。さらに、Only Buttons および Only Icons のバリアントに特化して Button と Icon の位置を定義できる Content Position プロパティがあります。