دراور (Drawer)
دراور یک پنل است که از لبهی صفحه بیرون میآید و محتوای تکمیلی را شامل میشود.
پایه (Basic)
استفاده پایه از دراور.
محل قرارگیری (Placement)
برای تنظیم محل بیرون آمدن دراور،
placement prop را به یکی از مقادیر 'top'، 'right'، 'bottom' یا 'left' تغییر دهید.عرض و ارتفاع (Width & Height)
ما میتوانیم عرض و ارتفاع دراور را از طریق
height و width prop تنظیم کنیم.استایل سفارشی (Custom Style)
دراور به ما این امکان را میدهد که کلاسهای اضافی را از طریق
headerClass، bodyClass و footerClass تنظیم کنیم.قابل بستن (Closable)
با تنظیم
closeable به false، آیکون بستن دراور مخفی خواهد شد.API
دراور (Drawer)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| placement | محل قرارگیری دراور | 'top' | 'right' | 'bottom' | 'left' | 'right' |
| width | عرض دراور، (فقط زمانی که محل قرارگیری به 'left' یا 'right' تنظیم شده باشد) | string | number | 400 |
| height | ارتفاع دراور، (فقط زمانی که محل قرارگیری به 'top' یا 'bottom' تنظیم شده باشد) | string | number | 400 |
| title | عنوان دراور | string | ReactNode | - |
| footer | فوتر دراور | string | ReactNode | - |
| headerClass | کلاس اضافی برای هدر دراور (! استفاده از این مدیفایر برای غلبه بر استایلهای Tailwind CSS توصیه میشود) | string | - |
| bodyClass | کلاس اضافی برای بدنه دراور (! استفاده از این مدیفایر برای غلبه بر استایلهای Tailwind CSS توصیه میشود) | string | - |
| footerClass | کلاس اضافی برای فوتر دراور (! استفاده از این مدیفایر برای غلبه بر استایلهای Tailwind CSS توصیه میشود) | string | - |
| showBackdrop | آیا پسزمینه دراور نمایش داده شود | boolean | true |
| lockScroll | آیا اسکرول پنجره را هنگام باز بودن دراور غیرفعال کند | boolean | true |
| isOpen | آیا دراور نمایش داده شود | boolean | false |
| style | استایل برای دراور و پسزمینه | object: { content: object, overlay: object } | - |
| portalClassName | کلاس نامی که به پورتال دراور اضافه میشود | string | - |
| bodyOpenClassName | کلاس نامی که به بدنه اضافه میشود وقتی که دراور باز است | string | - |
| htmlOpenClassName | کلاس نامی که به HTML اضافه میشود وقتی که دراور باز است | string | - |
| overlayClassName | کلاس نامی برای پسزمینه دراور | string | - |
| appElement | تنظیم گره خارجی برای محتوای دراور | SafeHTMLElement | SafeHTMLCollection | SafeNodeList | SafeHTMLElement[] | - |
| onAfterOpen | تابع بازگشتی پس از باز شدن دراور | (overlayElement: HTMLElement, contentElement: HTMLElement) => void | - |
| closable | آیا آیکون بستن دراور نمایش داده شود | boolean | true |
| onClose | تابع بازگشتی پس از کلیک بر روی آیکون بستن دراور | (event: Event) => void | - |
| onRequestClose | تابع بازگشتی پس از بسته شدن دراور | (event: Event) => void | - |
| closeTimeoutMS | سرعت تایماوت هنگام بسته شدن دراور | (event: Event) => void | 300 |
| shouldFocusAfterRender | آیا دراور پس از رندر فوکوس شود | boolean | true |
| shouldReturnFocusAfterClose | آیا دراور پس از بسته شدن فوکوس به المان قبلی بازگردد | boolean | true |
| preventScroll | آیا دراور از فلگ preventScroll برای بازگرداندن فوکوس به المان قبلی استفاده کند | boolean | false |
| shouldCloseOnOverlayClick | آیا دراور با کلیک روی پسزمینه بسته شود | boolean | true |
| shouldCloseOnEsc | آیا دراور با فشار دادن کلید esc بسته شود | boolean | true |
| parentSelector | تابعی که برای دریافت المان والد که دراور به آن متصل خواهد شد، فراخوانی میشود | () => document.body | () => document.body |
| overlayRef | مرجع پسزمینه دراور | (node: Node) => void | - |
| contentRef | مرجع محتوای دراور | (node: Node) => void | - |