AdminLTELogo

コントロールサイドバープラグイン

コントロールサイドバーコンポーネントは、右側のサイドバーとしてAdminLTEのレイアウトの一部です。

使い方

このプラグインはjQueryプラグインとして有効化するか、データAPIを使用して有効化できます。プラグインを有効化するには、最初にHTMLマークアップをレイアウトに追加し、次に以下に示すようにトグルボタンを作成する必要があります。

HTMLマークアップ
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
  <!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
データAPI

プラグインを有効にするには、任意のボタンまたは要素にdata-widget="control-sidebar"を追加します。

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

他のすべての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')