Drawer 抽屜

從螢幕邊緣滑出的抽屜面板，常用於詳情查看、表單填寫等需要較大展示空間的場景。 與 Dialog 的差別：貼邊展示、按方向滑動、面板尺寸作用於單邊（寬或高）。

基礎用法

四個方向與自訂尺寸

import { useState } from 'react'
import { LhButton, LhDrawer } from '@lh-ui/react'

export default function Demo() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <LhButton onClick={() => setOpen(true)}>打开抽屉</LhButton>
      <LhDrawer title="抽屉标题" open={open} onClose={() => setOpen(false)}>
        抽屉内容
      </LhDrawer>
    </>
  )
}

Drawer Props

屬性	說明	型別	可選值	預設值
children	主體內容	ReactNode	—	—
open	是否顯示（受控）	boolean	—	false
title	標題	ReactNode	—	—
direction	滑出方向	'right' | 'left' | 'top' | 'bottom'	—	'right'
size	面板尺寸（數字 → px，字串支援百分比）	string | number	—	'30%'
showClose	是否顯示關閉按鈕	boolean	—	true
maskClosable	點選遮罩是否關閉	boolean	—	false
closeOnEsc	按 Esc 是否關閉	boolean	—	true
lockScroll	是否鎖定 body 捲動（鎖定時同時圈住焦點）	boolean	—	true
beforeClose	關閉前攔截，呼叫 done 才繼續	(done: () => void) => void	—	—
zIndex	z-index（不傳走全域遞增體系）	number	—	—
header	頭部內容（覆蓋預設標題列）	ReactNode	—	—
footer	底部內容（按鈕區）	ReactNode	—	—
themeVars	元件級主題變數	Record<string, string>	—	—
sx	快速版面配置屬性（作用於面板）	SxProps	—	—

Drawer 事件

事件	說明	回呼簽名	Vue 對照
onClose	關閉請求（遮罩 / Esc / 關閉按鈕，經 beforeClose 攔截後觸發）	() => void	update:modelValue / close
onOpen	開啟時觸發（DOM 掛載後、進入動畫前）	() => void	open
onOpened	開啟動畫結束	() => void	opened
onCloseStart	關閉請求被接受、開始離開動畫	() => void	—
onClosed	關閉動畫結束、DOM 卸載後	() => void	closed

ref

forwardRef<LhDrawerInstance>。LhDrawerInstance 暴露 close()（走 beforeClose 攔截）與 isOpen。

遮罩預設不可點穿

maskClosable 預設 false（core 的 canDrawerClose 預設拒絕遮罩點選），避免誤觸； plus 的 closeOnClickModal 預設 true，遷移時需顯式宣告。

焦點圈

僅在 lockScroll 開啟時圈住焦點（shouldDrawerTrapFocus）：抽屜常作為輕量面板， 不鎖定捲動時保留背後表單的 Tab 序列。關閉時焦點歸還。

尺寸方向

size 為數字時歸一化為 px；左右方向作用於面板 width，上下方向作用於 height。

樣式

import '@lh-ui/react/style/drawer'