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