Liferay UI taglibでは、アプリに含めることができるいくつかのアイコンを提供しています。アプリにアイコンを追加するには、liferay-ui:icon
タグを使用して、 icon
、iconCssClass
、またはimage
属性のいずれかでアイコンを指定します。各ユースケースの例を以下に示します。
image
属性は、(スタイルなしテーマのimages/common
フォルダーで定義されている)使用するLiferay UIアイコンを指定します。JSPの構成例を次に示します。
<div class="col-md-3">
<liferay-ui:icon image="subscribe" />
<span class="ml-2">Subscribe</span>
</div>
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
/>
使用可能なアイコンの全リストを以下の図に示します。
icon
属性は、使用するFont Awesomeアイコンを指定します。
<liferay-ui:icon icon="angle-down" />
iconCssClass
属性は、使用するglyphiconを指定します。
<liferay-ui:icon
iconCssClass="icon-remove-sign"
label="<%= true %>"
message="unsubscribe"
url="<%= unsubscribeURL %>"
/>
上記の例では、アイコンで使用可能な属性の一部を使用しています。全リストについては、Icon taglibdocsを参照してください。