コントロールサイドバーコンポーネントは、右側のサイドバーとしてAdminLTEのレイアウトの一部です。
このプラグインはjQueryプラグインとして有効化するか、データAPIを使用して有効化できます。プラグインを有効化するには、最初にHTMLマークアップをレイアウトに追加し、次に以下に示すようにトグルボタンを作成する必要があります。
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
プラグインを有効にするには、任意のボタンまたは要素にdata-widget="control-sidebar"
を追加します。
<a href="#" data-widget="control-sidebar">Toggle Control Sidebar</a>
他のすべてのAdminLTEプラグインと同様に、次の例を実行してjQueryを使用してトグルボタンを有効にすることもできます。
$("#my-toggle-button").ControlSidebar('toggle');
名前 | タイプ | デフォルト | 説明 |
---|---|---|---|
controlsidebarSlide | boolean | 真 | サイドバーをコンテンツの上部にスライドさせるか、そのスペースを作るためにコンテンツを押し出すかを指定します。 |
scrollbarTheme | boolean | os-theme-light |
SideBar Fixed中に使用されるスクロールバーのテーマ |
scrollbarAutoHide | boolean | false |
スクロールバーの自動非表示トリガー |
target | 文字列 | .control-sidebar |
複数のcontrol-sidebarsを処理するためのターゲットcontrol-sidebar。 |
ヒント!
次のデータ属性を介してオプションを使用すると、768ピクセルの幅で自動的にサイドバーを折りたたむことができます。
<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)
メソッド | 説明 |
---|---|
collapse | control-sidebarを折りたたみます。 |
show | control-sidebarを表示します |
toggle | control-sidebarを展開または折りたたんだ状態を切り替えます。 |
例: $('#toggle-button').ControlSidebar('toggle')