Liferay UIアイコン
Liferay UI taglibは、アプリに含めることができるいくつかのアイコンを提供します。 アプリにアイコンを追加するには、liferay-ui:icon
タグを使用し、icon
、iconCssClass
、またはimage
属性のいずれかでアイコンを指定します。 各ユースケースの例を以下に示します。
image
属性は、使用する Liferay UIアイコン を指定します(スタイルなしテーマのimages/common
フォルダで定義されています)。 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 を参照してください。