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'