コントロールサイドバーコンポーネントは、AdminLTEのレイアウトの右側のサイドバーとして機能しています。
このプラグインは、jQueryプラグインとして、またはdata apiを使用して有効にすることができます。プラグインを有効にするには、まずレイアウトにHTMLマークアップを追加し、次に以下のように切り替えボタンを作成する必要があります。
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
プラグインを有効にするには、任意のボタンまたはa要素にdata-widget="control-sidebar"を追加します。
<a href="#" data-widget="control-sidebar">Toggle Control Sidebar</a>
他のAdminLTEプラグインと同様に、次の例を実行してjQueryを使用して切り替えボタンを有効にすることもできます。
$("#my-toggle-button").ControlSidebar('toggle');
| 名前 | 種類 | デフォルト | 説明 |
|---|---|---|---|
| controlsidebarSlide | boolean | TRUE | サイドバーがコンテンツの上にスライドするかどうか、またはコンテンツをプッシュしてスペースを作るかどうかを示します。 |
| scrollbarTheme | boolean | os-theme-light |
サイドバーを固定したときに使用されるスクロールバーテーマ |
| scrollbarAutoHide | boolean | l |
スクロールバーの自動非表示トリガー |
ヒント！
幅768ピクセルでサイドバーを自動折りたたみにするには、次のようにdata属性でオプションを使用できます。
<a href="#" data-widget="control-sidebar" data-controlsidebar-slide="false">Toggle Control Sidebar</a>
| イベントタイプ | 説明 |
|---|---|
| expanded.lte.controlsidebar | コントロールサイドバーが展開された後にトリガーされます。 |
| collapsed.lte.controlsidebar | コントロールサイドバーが折りたたまれた後にトリガーされます。 |
例: $('#toggle-button').on('expanded.lte.controlsidebar', handleExpandedEvent)