Documentation

Documentation Menu
Go Back

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

情報バーには、サイドバーの追加情報の表示を切り替えるボタンがあります。 これは、ファイルサイズ、タイプ、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>に、クラスclosedsidenav-rightがあることに注目してください。 情報ボタンは、クラスopenclosedを切り替え、サイドバーパネルの表示と非表示を切り替えます。 sidenav-rightクラスは、パネルが右側で開く必要があることを指定しています。

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

上記の例では、使用可能な属性のいくつかを使用しています。 タグで使用可能な属性の完全なリストについては、 情報バー情報バーボタン情報バーサイドナビゲーショントグルボタン 、および サイドバーパネル のtaglibdocを参照してください。

関連トピック