دراور یک پنل است که از لبهی صفحه بیرون میآید و محتوای تکمیلی را شامل میشود.
placement prop را به یکی از مقادیر 'top'، 'right'، 'bottom' یا 'left' تغییر دهید.height و width prop تنظیم کنیم.headerClass، bodyClass و footerClass تنظیم کنیم.closeable به false، آیکون بستن دراور مخفی خواهد شد.| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| 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 | - |