Documentation

Documentation Menu
Go Back

Liferay UIアイコン

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

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

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

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

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

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

Liferay UI taglibは、アプリで使用するための複数のアイコンを提供します。

Liferay UIアイコンは、言語に基づいて構成できます。

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

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

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

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

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

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

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

関連トピック