情報バーには、追加のサイドバー情報の表示を切り替えるボタンがあります。これは、ファイルサイズ、タイプ、URLなど、検索結果のより詳細なメタデータを提供するのに最適です。
構成には、情報バー(およびボタン)とサイドバーパネルの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>
にはクラスclosed
とsidenav-right
があることに注意してください。情報ボタンは、クラスopen
とclosed
を切り替えて、サイドバーパネルを表示および非表示にします。sidenav-right
クラスは、パネルが右側に開くよう指定します。
上記の例では、使用可能な属性の一部を使用しています。タグに使用可能な属性の全リストについては、info bar、info bar buttons、info bar sidenav toggler button、およびsidebar paneltaglibdocsを参照してください。