コントロールサイドバープラグイン
コントロールサイドバーコンポーネントは、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 | ブール値 | TRUE | サイドバーがコンテンツにスライドするのか、コンテンツを押し出してスペースを作るのか。 |
| scrollbarTheme | ブール値 | os-theme-light |
サイドバー固定時に使用されるスクロールバーのテーマ |
| scrollbarAutoHide | ブール値 | l |
スクロールバーの自動非表示トリガー |
| target | 文字列 | .control-sidebar |
複数のcontrol-sidebarsを処理するためのtarget control-sidebar。 |
| animationSpeed | ブール値 | 300 |
アニメーション/トランジションの速度をscssトランジションの速度と同じに設定します。 |
ヒント!
次のようにdata属性を使用して任意のオプションを使用して、768ピクセルの幅で自動的にサイドバーを折りたたむことができます。
<a href="#" data-widget="control-sidebar" data-controlsidebar-slide="false">Toggle Control Sidebar</a>
イベント
| イベントタイプ | 説明 |
|---|---|
| expanded.lte.controlsidebar | コントロールサイドバーを展開した後にトリガーされます。 |
| collapsed.lte.controlsidebar | コントロールサイドバーを折りたたんだ後にトリガーされます。 |
| collapsed-done.lte.controlsidebar | コントロールサイドバーが完全に折りたたまれた後にトリガーされます。 |
例: $('#toggle-button').on('expanded.lte.controlsidebar', handleExpandedEvent)
メソッド
| メソッド | 説明 |
|---|---|
| collapse | コントロールサイドバーを折りたたむ |
| show | コントロールサイドバーを表示する |
| toggle | コントロールサイドバーの展開状態と折りたたみ状態を切り替える |
例: $('#toggle-button').ControlSidebar('toggle')