Liferay UIタブ

タブは、コンテンツを個々のセクションに整理する仕切りを作成します。コンテンツは、別のJSPから埋め込んだり含めたりできます。

アプリにタブを追加するには、<liferay-ui:tabs>タグを使用し、各タブの名前をnames属性のコンマ区切りリストとして指定します。たとえば、tab1tab2tab3と名前が付けられた3つのタグは、JSPで次のように表示されます。

<liferay-ui:tabs names="tab1,tab2,tab3">

</liferay-ui:tabs>

各タブには、コンテンツを表示するための対応するセクションが必要です。タブごとにliferay-ui:sectionタグをネストします。各セクション内で、HTMLコンテンツを追加したり、別のJSPから(<%@ includefile="filepath"%>ディレクティブ経由で)コンテンツを含めることで間接的にコンテンツを追加できます。以下のスニペットの例は、予定表ポートレットのconfiguration.jspからのものです。

<liferay-ui:tabs
names='<%= "user-settings,display-settings,rss" %>'
param="tabs2"
refresh="<%= false %>"
type="tabs nav-tabs-default"
>
<liferay-ui:section>
<%@ include file="/configuration/user_settings.jspf" %>
</liferay-ui:section>

<liferay-ui:section>
<%@ include file="/configuration/display_settings.jspf" %>
</liferay-ui:section>

<liferay-ui:section>
<%@ include file="/configuration/rss.jspf" %>
</liferay-ui:section>
</liferay-ui:tabs>

図1:タブは、構成オプションを同じUI内の個々のセクションに整理する便利な方法です。

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

関連トピック

Clay Navigation Bars

Clay Dropdown Menus and Action Menus

Liferay UI Icon Help

« Liferay UIアイコンメニューLiferay UIアイコンヘルプ »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています