Liferayフロントエンド情報バー

情報バーには、追加のサイドバー情報の表示を切り替えるボタンがあります。これは、ファイルサイズ、タイプ、URLなど、検索結果のより詳細なメタデータを提供するのに最適です。

図1:情報バータグは、追加情報を表示するサイドバーパネルトグラーを作成します。

構成には、情報バー(およびボタン)とサイドバーパネルの2つの主要な部分があります。

情報バー:

<liferay-frontend:info-bar>
<liferay-frontend:info-bar-buttons>
<liferay-frontend:info-bar-sidenav-toggler-button
icon="info-circle"
label="my info"
/>
</liferay-frontend:info-bar-buttons>
</liferay-frontend:info-bar>

<liferay-frontend:info-bar-sidenav-toggler-button>タグは、 icon属性にClayアイコンを使用します。

サイドバーパネル:

<div class="closed container-fluid-1280 sidenav-container sidenav-right" id="<portlet:namespace />infoPanelId">
<liferay-frontend:sidebar-panel>
<div>
<h2>sidebar content</h2>
<p>Here is some content</p>
</div>
</liferay-frontend:sidebar-panel>
</div>

サイドバーパネルのラッパー<div>にはクラスclosedsidenav-rightがあることに注意してください。情報ボタンは、クラスopenclosedを切り替えて、サイドバーパネルを表示および非表示にします。sidenav-rightクラスは、パネルが右側に開くよう指定します。

図2:情報バータグは、追加情報を表示するサイドバーパネルトグラーを作成します。

上記の例では、使用可能な属性の一部を使用しています。タグに使用可能な属性の全リストについては、info barinfo bar buttonsinfo bar sidenav toggler button、およびsidebar paneltaglibdocsを参照してください。

関連トピック

Liferay Front-end Add Menu

Liferay Front-end Cards

Liferay Front-end Management Bar

« LiferayフロントエンドカードLiferayフロントエンド管理バー »
この記事は役に立ちましたか?
1人中0人がこの記事が役に立ったと言っています