Documentation

Documentation Menu
Go Back

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

画像カードには、画像やドキュメントが表示されます。

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

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

注釈

利用可能なLiferayアイコンの完全なリストは、 Clay CSS Webサイト にあります。

ユーザーカード

ユーザーカードには、ユーザープロフィール画像またはユーザーの名前または名+姓のイニシャルが表示されます。

イニシャル付きのユーザーカード:

<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にカードを使用してアプリに情報を表示する方法がわかりました。