カードは視覚的にデータを表します。カードは、画像、ドキュメントライブラリ、ユーザープロファイルなどに使用します。カードには主に4つのタイプがあります。
- 画像カード
- ファイルカード
- ユーザーカード
- 横型カード
このチュートリアルでは、これらの各タイプについて説明します。
画像カード
画像カードは、画像/ドキュメントのギャラリーに使用されます。
画像カード：
<clay:image-card
actionItems="<%= cardsDisplayContext.getDefaultActionItems() %>"
href="#1"
imageAlt="thumbnail"
imageSrc="https://images.unsplash.com/photo-1506976773555-b3da30a63b57"
subtitle="Author Action"
title="Madrid"
/>
アイコン付きの画像カード：
<clay:image-card
actionItems="<%= cardsDisplayContext.getDefaultActionItems() %>"
icon="camera"
subtitle="Author Action"
title="<%= SVG_FILE_TITLE %>"
/>
空の画像カード：
<clay:image-card
actionItems="<%= cardsDisplayContext.getDefaultActionItems() %>"
subtitle="Author Action"
title="<%= SVG_FILE_TITLE %>"
/>
カードにはファイルの種類を含めることもできます。filetype属性を使用してファイルの種類を指定します。
<clay:image-card
actionItems="<%= cardsDisplayContext.getDefaultActionItems() %>"
fileType="JPG"
fileTypeStyle="danger"
href="#1"
imageAlt="thumbnail"
imageSrc="https://images.unsplash.com/photo-1499310226026-b9d598980b90"
subtitle="Author Action"
title="California"
/>
ラベルをカードに追加するには、labels属性を含めます。
<clay:image-card
actionItems="<%= cardsDisplayContext.getDefaultActionItems() %>"
fileType="JPG"
fileTypeStyle="danger"
href="#1"
imageAlt="thumbnail"
imageSrc="https://images.unsplash.com/photo-1503703294279-c83bdf7b4bf4"
labels="<%= cardsDisplayContext.getLabels() %>"
subtitle="Author Action"
title="Beetle"
/>
カードを選択できるようにするには、selectable属性を含めます（チェックボックスを含める）。
<clay:image-card
actionItems="<%= cardsDisplayContext.getDefaultActionItems() %>"
fileType="JPG"
fileTypeStyle="danger"
href="#1"
imageAlt="thumbnail"
imageSrc="https://images.unsplash.com/photo-1506020647804-b04ee956dc04"
labels="<%= cardsDisplayContext.getLabels() %>"
selectable="<%= true %>"
selected="<%= true %>"
subtitle="Author Action"
title="Beetle"
/>
ファイルカード
ファイルカードには、ファイルの種類のアイコンが表示されます。これらは、画像ファイル以外のファイルの種類（PDF、MP3、DOCなど）を表します。
<clay:file-card
actionItems="<%= cardsDisplayContext.getDefaultActionItems() %>"
fileType="MP3"
fileTypeStyle="warning"
labels="<%= cardsDisplayContext.getLabels() %>"
labelStylesMap="<%= cardsDisplayContext.getLabelStylesMap() %>"
selectable="<%= true %>"
selected="<%= true %>"
subtitle="Jimi Hendrix"
title="<%= MP3_FILE_TITLE %>"
/>
上記のように、オプションでlabelStylesMap属性を使用して、複数のラベルのHashMapを渡すことができます。
次の例では、デフォルトのファイルアイコンの代わりにリストiconを指定します。
<clay:file-card
actionItems="<%= cardsDisplayContext.getDefaultActionItems() %>"
fileType="DOC"
fileTypeStyle="info"
icon="list"
labels="<%= cardsDisplayContext.getLabels() %>"
selectable="<%= true %>"
selected="<%= true %>"
subtitle="Paco de Lucia"
title="<%= DOC_FILE_TITLE %>"
/>
ユーザーカード
ユーザーカードには、ユーザープロフィール画像またはユーザーの名前または名前と姓のイニシャルが表示されます。
イニシャル付きのユーザーカード：
<clay:user-card
actionItems="<%= cardsDisplayContext.getDefaultActionItems() %>"
initials="HS"
name="User Name"
subtitle="Latest Action"
userColor="danger"
/>
プロフィール画像付きのユーザーカード：
<clay:user-card
actionItems="<%= cardsDisplayContext.getDefaultActionItems() %>"
disabled="<%= true %>"
imageAlt="thumbnail"
imageSrc="https://images.unsplash.com/photo-1502290822284-9538ef1f1291"
name="User name"
selectable="<%= true %>"
selected="<%= true %>"
subtitle="Latest Action"
/>
横型カード
横型カードはフォルダーを表し、他のカードと同じ量の情報を持つことができます。主な違いとして、横型カードに必要なのはフォルダのアイコンだけなので、横型カードでは画像部分を削除できます。
<clay:horizontal-card
actionItems="<%= cardsDisplayContext.getDefaultActionItems() %>"
selectable="<%= true %>"
selected="<%= true %>"
title="ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual"
/>
これで、UIにカードを使用してアプリに情報を表示する方法がわかりました。