Clayラベルとリンク

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

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

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

関連トピック