Clayラベルとリンク

Liferay Clay taglibは、アプリでラベルとリンクを作成するためのタグを提供します。 このチュートリアルでは、これらの両方のUI要素をアプリに追加する方法を説明します。

ラベル

Liferay Clay taglibは、アプリにいくつかの異なるラベルを提供します。clay:labelタグを使用し て、アプリにラベルを追加します。色分けされたラベル、削除可能なラベル、およびリンクを含むラベルを作成できます。以下のセクションでは、これらすべてのオプションについて説明します。

色分けされたラベル

Liferay Clayラベルには、4つの異なる色があります:情報を示す濃い青色、ステータスを示す薄い灰色、保留中を示すオレンジ色、拒否済みを示す赤色、承認済みを示す緑色です。

情報ラベルは濃い青色で、ステータスラベルよりも目立つため、一般的な情報を伝えるのに最適です。情報ラベルを使用するには、style属性をinfoに設定します。

<clay:label label="Label text" style="info" />

図1:情報ラベルは一般的な情報を伝えます。

ステータスラベルは薄い灰色で、中間色のため、基本的な情報を伝えるのに最適です。ステータスラベルはデフォルトのラベルであるため、style属性は必要ありません。

<clay:label label="Status" />

図2:ステータスラベルは最も目立たず、基本的な情報を表示するのに最適です。

警告ラベルはオレンジ色であり、その色から、警告メッセージを伝えるのに最適です。警告ラベルを使用するには、style属性をwarningに設定します 。

<clay:label label="Pending" style="warning" />

図3:警告ラベルはユーザーに問題を通知しますが、アプリが破損することはありません。

危険ラベルは赤色で、何か問題が発生しているか、または故障したことを示します。危険ラベルを使用するには、style属性をdangerに設定します。

<clay:label label="Rejected" style="danger" />

図4:危険ラベルは対処しなければならない緊急事態を伝えます。

成功ラベルは緑色で、アクションが正常に完了したことを示します。 成功ラベルを使用するには、style属性をsuccessに設定します。

<clay:label label="Approved" style="success" />

図5:成功ラベルは、成功したアクションを示します。

ラベルは大きくすることもできます。大きなラベルを表示するには、size属性をlgに設定します。

<clay:label label="Approved" size="lg" style="success" />

削除可能なラベル

ユーザーにラベルを閉じさせたい場合(一時的な通知など)、closeable属性をtrueに設定してラベルを削除可能にすることができます。

<clay:label closeable="<%= true %>" label="Normal Label" />

図6:ラベルは削除可能です。

リンクを含むラベル

アンカータグと同じようにhref属性を追加して、ラベルをリンクにすることができます。

<clay:label href="#" label="Label Text" />

図7:ラベルはリンクにすることもできます。

リンク

<clay:link>タグを使用して、従来のハイパーリンクをアプリに追加できます。

<clay:link href="#" label="link text" />

図8:Clay taglibはリンク要素も提供します。

これで、アプリにリンクとラベルを追加する方法がわかりました。

関連トピック

Clay Badges

Clay Cards

Clay Form Elements

« ClayアイコンClay管理ツールバー »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています