Liferay UIアイコン

Liferay UI taglibでは、アプリに含めることができるいくつかのアイコンを提供しています。アプリにアイコンを追加するには、liferay-ui:icon タグを使用して、 iconiconCssClass、またはimage 属性のいずれかでアイコンを指定します。各ユースケースの例を以下に示します。

image属性は、(スタイルなしテーマのimages/commonフォルダーで定義されている)使用するLiferay UIアイコンを指定します。JSPの構成例を次に示します。

<div class="col-md-3">
<liferay-ui:icon image="subscribe" />

<span class="ml-2">Subscribe</span>
</div>

図1:Image属性を使用してテーマアイコンを使用します。

Liferay UI taglibは、言語フラグアイコンも公開しています。言語フラグアイコンを使用するには、アイコン名の前に相対パス../language/を指定します。以下は、ローカライズされたメッセージとともに現在の言語のフラグを表示するWebコンテンツ検索ポートレットのサンプルスニペットです。

<liferay-ui:icon
image='<%= "../language/" + languageId %>'
message='<%= LanguageUtil.format(
request,
"this-result-comes-from-the-x-version-of-this-content",
snippetLocale.getDisplayLanguage(locale),
false
) %>'
/>

使用可能なinit.ftl 変数およびLiferay DXPマクロを使用する次のコードを使用して、FreeMarkerで同じ結果を得ることができ ます。

<#assign flag_message>
<@liferay.language_format
arguments=language
key="this-result-comes-from-the-x-version-of-this-content"
/>
</#assign>

<@liferay_ui["icon"]
image="../language/${language_id}"
message=flag_message
/>

使用可能なアイコンの全リストを以下の図に示します。

図2:Liferay UI taglibは、アプリで使用できる複数のアイコンを提供しています。

図3:言語に基づいてLiferay UIアイコンを構成できます。

icon 属性は、使用するFont Awesomeアイコンを指定します。

<liferay-ui:icon icon="angle-down" />

図4:Icon属性を使用して、アプリにFont Awesomeアイコンを含めることができます。

iconCssClass属性は、使用するglyphiconを指定します。

<liferay-ui:icon
iconCssClass="icon-remove-sign"
label="<%= true %>"
message="unsubscribe"
url="<%= unsubscribeURL %>"
/>

図5:アプリでFont Awesomeアイコンを使用できます。

上記の例では、アイコンで使用可能な属性の一部を使用しています。全リストについては、Icon taglibdocsを参照してください。

関連トピック

Clay Icons

Liferay UI Icon Lists

Liferay UI Icon Menus

« Liferay UI Taglibの使用Liferay UIアイコンリスト »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています