此網站需要開啟JavaScript
JavaScript is required

Drawer

從側邊滑出的面板,適合篩選條件、購物車這類不需要打斷主流程的內容。

基本抽屜

CommonDrawerBasic

components/Common/Drawer/Basic.vue

開關由元件自己管,把觸發元素放進 #trigger 就好, 不需要在外層自己開一個 ref。

和 Modal 一樣走 useDialog: Escape 關閉、Tab 不會跑到背景、關閉後焦點回到原本的觸發元素、 開啟期間背景不捲動。

title 同時是抽屜的無障礙名稱, 請一定要給。

點開看看,可以用 Tab 確認焦點被鎖在面板內

Props

名稱型別預設值說明
titleString''抽屜標題,同時是無障礙名稱

Slots

SlotSlot props說明
trigger—觸發開啟的元素
default—抽屜內容
footer—底部固定區