درج 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

خاصية	الوصف	النوع	القيم المتاحة	الافتراضي
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 (دالة canDrawerClose في core ترفض النقر على القناع افتراضيًا) لتجنب النقر غير المقصود؛ وافتراضيًا closeOnClickModal في plus هو true، لذا يجب التصريح به صراحة عند الترحيل.

حصر التركيز

يُحصر التركيز فقط عند تفعيل lockScroll (shouldDrawerTrapFocus): فالدرج يعمل غالبًا كلوحة خفيفة، وعند عدم قفل التمرير يُحتفظ بتسلسل Tab للنموذج الذي خلفه. وعند الإغلاق يُعاد التركيز.

الحجم والاتجاه

عندما يكون size رقمًا يُطبّع إلى px؛ ويتحكم اتجاها الجانبين (يمين / يسار) في width الخاصة باللوحة بينما يتحكم الاتجاهان (أعلى / أسفل) في height.

الأنماط

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