Clayカード

カードは視覚的にデータを表します。カードは、画像、ドキュメントライブラリ、ユーザープロファイルなどに使用します。カードには主に4つのタイプがあります。

  • 画像カード
  • ファイルカード
  • ユーザーカード
  • 横型カード

このチュートリアルでは、これらの各タイプについて説明します。

画像カード

画像カードは、画像/ドキュメントのギャラリーに使用されます。

画像カード:

<clay:image-card
actionItems="<%= cardsDisplayContext.getDefaultActionItems() %>"
href="#1"
imageAlt="thumbnail"
imageSrc="https://images.unsplash.com/photo-1506976773555-b3da30a63b57"
subtitle="Author Action"
title="Madrid"
/>

図1:画像カードには画像とドキュメントが表示されます。

アイコン付きの画像カード:

<clay:image-card
actionItems="<%= cardsDisplayContext.getDefaultActionItems() %>"
icon="camera"
subtitle="Author Action"
title="<%= SVG_FILE_TITLE %>"
/>

図2:画像カードでは、画像の代わりにアイコンを表示することもできます。

空の画像カード:

<clay:image-card
actionItems="<%= cardsDisplayContext.getDefaultActionItems() %>"
subtitle="Author Action"
title="<%= SVG_FILE_TITLE %>"
/>

図3:カードに何も表示されないようにすることもできます。

カードにはファイルの種類を含めることもできます。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"
/>

図4:カードにはファイルの種類を含めることもできます。

ラベルをカードに追加するには、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"
/>

図5:カードにラベルを含めることができます。

カードを選択できるようにするには、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"
/>

図6:カードが選択可能になります。

ファイルカード

ファイルカードには、ファイルの種類のアイコンが表示されます。これらは、画像ファイル以外のファイルの種類(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 %>"
/>

図7:ファイルカードにはファイルの種類を示すアイコンが表示されます。

上記のように、オプションで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"
/>

図8:ユーザーカードには、ユーザーのイニシャルを表示できます。

プロフィール画像付きのユーザーカード:

<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"
/>

図9:ユーザーカードにはプロフィール画像を表示することもできます。

横型カード

横型カードはフォルダーを表し、他のカードと同じ量の情報を持つことができます。主な違いとして、横型カードに必要なのはフォルダのアイコンだけなので、横型カードでは画像部分を削除できます。

<clay:horizontal-card
actionItems="<%= cardsDisplayContext.getDefaultActionItems() %>"
selectable="<%= true %>"
selected="<%= true %>"
title="ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual"
/>

図10:横型カードはフォルダーの表示に適しています。

これで、UIにカードを使用してアプリに情報を表示する方法がわかりました。

関連トピック

Clay Badges

Clay Labels and Links

Clay Stickers

« ClayボタンClayドロップダウンメニューとアクションメニュー »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています