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

コントロールサイドバーは右側のサイドバーです。これは多くの目的に使用でき、非常に簡単に作成できます。サイドバーには、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>