# 抽屜/Off-canvas 創建一個可以在頁面上平滑地滑入滑出的抽屜。 抽屜完美適用于構建移動端導航，與那些頗受歡迎的許多原生手機應用類似，在其左上角用一個按鈕來開關帶有菜單的側邊欄。 ## 用法 抽屜組件由一個遮罩層和一個彈出邊欄組成。 | Class | 描述 | | --- | --- | | `.uk-offcanvas` | 添加該類至一個`&lt;div&gt;`元素來創建隱藏在頁面外的邊欄容器和覆蓋層。id也需要添加，使抽屜可被打開或關閉。 | | `.uk-offcanvas-bar` | 添加該類至一個子級 `&lt;div&gt;` 元素來創建抽屜式邊欄。 | 你可以使用任何元素來切換抽屜式側邊欄。 `&lt;a&gt;`元素需要鏈接至抽屜容器的id。為了使必要的JavaScript生效，僅需添加`data-uk-offcanvas`屬性即可。如果你使用了其他元素，比如按鈕，僅需添加 `data-uk-offcanvas="{target:'#ID'}"` 屬性指向抽屜容器的id。 ### 示例  ### Code ``` <!-- 這是開關抽屜式邊欄的錨 --> <a href="#my-id" data-uk-offcanvas>...</a> <!-- 這是開關抽屜式邊欄的按鈕 --> <button class="uk-button" data-uk-offcanvas="{target:'#my-id'}">...</button> <!-- 抽屜式邊欄 --> <div id="my-id" class="uk-offcanvas"> <div class="uk-offcanvas-bar">...</div> </div> ``` * * * ## 翻轉修飾 添加 `.uk-offcanvas-bar-flip` 類至抽屜式邊欄，使之從右側滑出。 ### 示例  ### Code ``` <div id="my-id" class="uk-offcanvas"> <div class="uk-offcanvas-bar uk-offcanvas-bar-flip">...</div> </div> ``` * * * ## 抽屜式導航 抽屜式側邊欄可以包含[導航欄](nav.html)。添加`.uk-nav-offcanvas`類來根據抽屜的上下文定義導航菜單的樣式。 ### 示例  ### Code ``` <!-- 這是用來觸發抽屜式邊欄的按鈕 --> <button class="uk-button" data-uk-offcanvas="{target:'#my-id'}">...</button> <!-- 抽屜式邊欄 --> <div id="my-id" class="uk-offcanvas"> <div class="uk-offcanvas-bar"> <ul class="uk-nav uk-nav-offcanvas" data-uk-nav>...</ul> </div> </div> ``` * * * ## 抽屜式面板 你可以在抽屜式邊欄的內部放置任何自定義內容。僅需將其包裹在帶有`.uk-panel`類的`&lt;div&gt;`元素中即可。 ### 示例  ### Code ``` <!-- 這是用來觸發抽屜式邊欄的按鈕 --> <button class="uk-button" data-uk-offcanvas="{target:'#my-id'}">...</button> <!-- 這是抽屜式邊欄 --> <div id="my-id" class="uk-offcanvas"> <div class="uk-offcanvas-bar"> <div class="uk-panel">...</div> </div> </div> ``` * * * ## JavaScript 可以通過JavaScript來打開或關閉抽屜： ``` // 通過CSS選擇器匹配抽屜顯示狀態 $.UIkit.offcanvas.show('#my-id'); // 隱藏當前所有抽屜。如果你不需要任何動畫效果，設置為 true。 $.UIkit.offcanvas.hide([force = false]) ``` ### 事件 | 事件名稱 | 參數 | 描述 | | --- | --- | --- | | `show.uk.offcanvas` | event, panel, bar | 抽屜顯示時觸發 | | `hide.uk.offcanvas` | event, panel, bar | 抽屜隱藏時觸發 |