控制側邊欄外掛程式
控制側邊欄元件是 AdminLTE 佈局的一部分，作為右側邊欄。
用法
此外掛程式可以作為 jQuery 外掛程式或使用 data api 啟用。要啟用此外掛程式，您必須先將 HTML 標記添加到您的佈局中，然後建立如下所示的切換按鈕。
HTML 標記
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
Data api
在任何按鈕或 a 元素中新增 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 |
目標控制側邊欄以處理多個控制側邊欄。 |
| animationSpeed | 布林值 | 300 |
將動畫/轉場速度設定為等於 scss 轉場速度。 |
提示！
您可以使用 data-attributes 的任何選項，如下所示，以在 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')