Clayラベルとリンク
Liferay Clay taglibは、アプリでラベルとリンクを作成するためのタグを提供します。 これらの各要素について、以下で説明します。
ラベル
Liferay Clay taglibは、アプリにいくつかの異なるラベルを提供します。 clay:label
タグを使用して、アプリにラベルを追加します。 色分けされたラベル、削除可能なラベル、およびリンクを含むラベルを作成できます。 以下のセクションでは、これらのオプションについて説明します。
色分けされたラベル
Liferay Clayのラベルには、情報を表す紺色、ステータスを表す薄い灰色、保留中を表すオレンジ、拒否を表す赤、承認を表す緑の5つの異なる色があります。
情報ラベルは紺色で、ステータスラベルよりも少し目立つため、一般的な情報を伝えるのに最適です。 情報ラベルを使用するには、 displayType
属性を info
に設定する。
<clay:label displayType="info" label="Label text" />
ステータスラベルは薄い灰色で、中間色であるため、基本的な情報を伝えるのに最適です。 ステータス・ラベルはデフォルト・ラベルであるため、 displayType
属性は必要ない。
<clay:label label="Status" />
注意ラベルはオレンジ色で、その色合いから、警告メッセージを伝えるのに最適です。 警告ラベルを使用するには、 displayType
属性を warning
に設定します。
<clay:label displayType="warning" label="Pending" />
危険ラベルは赤色で、何かが間違っているか失敗したことを示します。 危険ラベルを使用するには、 displayType
属性を danger
に設定します。
<clay:label displayType="danger" label="Rejected" />
成功ラベルは緑色で、何かが正常に完了したことを示します。 成功ラベルを使用するには、 displayType
属性を success
に設定します。
<clay:label displayType="success" label="Approved" />
ラベルを大きくすることもできます。 大きなラベルを表示するには、size
属性をlg
に設定します。
<clay:label displayType="success" label="Approved" size="lg" />
削除可能なラベル
ユーザーがラベルを閉じられるようにする場合(一時的な通知など)、closeable
属性をtrue
に設定することで、ラベルを削除可能にすることができます。
<clay:label closeable="<%= true %>" label="Normal Label" />
リンク付きラベル
アンカータグの場合と同じように、ラベルにhref
属性を追加することで、ラベルをリンクにすることができます。
<clay:label href="#" label="Label Text" />
リンク
<clay:link>
タグを使用して、従来のハイパーリンクをアプリに追加できます。
<clay:link href="#" label="link text" />
これで、アプリにリンクとラベルを追加する方法がわかりました。