コントロールサイドバーコンポーネント

コントロールサイドバーは右側のサイドバーです。多くの用途に使用でき、非常に簡単に作成できます。サイドバーには、2つの異なる表示/非表示スタイルが付属しています。 1つ目は、サイドバーがコンテンツ上にスライドすることを可能にします。 2つ目は、サイドバーのためのスペースを作るためにコンテンツをプッシュします。これらのいずれかの方法は、Javascriptオプションで設定できます。

以下のコードは、.wrapper div内に配置する必要があります。フッターの直後に配置することをお勧めします。

コントロールサイドバープッシュ

.control-sidebar-push を body に追加することにより、サイドバーはコンテンツをオーバーレイする代わりに、コンテンツを押し出します。 .control-sidebar-push-slide を body に追加して、トランジションでコンテンツを押し出すこともできます。

ダークサイドバーマークアップ

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
    <div class="p-3">
      <!-- Content of the sidebar goes here -->
    </div>
  </aside>
  <!-- /.control-sidebar -->

ライトサイドバーマークアップ

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-light">
    <!-- Control sidebar content goes here -->
    <div class="p-3">
      <!-- Content of the sidebar goes here -->
    </div>
  </aside>
  <!-- /.control-sidebar -->

コントロールサイドバートグルマークアップ

サイドバーを作成したら、開閉するためのトグルボタンが必要になります。 data-toggle=”control-sidebar” 属性を任意のボタンに追加すると、自動的にトグルボタンとして機能します。

<a class="nav-link" data-widget="control-sidebar" href="#">Toggle Control Sidebar</a>