سرریز
سرریز خالی

اجزای "Blank Slide Over" ابزاری چندکاره است که به شما امکان می‌دهد دیالوگ‌های لغزشی قابل تنظیم برای اهداف مختلف روی وب‌سایت خود ایجاد کنید. این ابزار یک پاک و ساده فضای کانونی فراهم می‌کند تا شما بتوانید محتوای خود را اضافه کنید، که این امر باعث می‌شود که برای طیف گسترده‌ای از موارد استفاده مناسب باشد.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTag!-- BEGIN: سرریز Toggle --HTMLCloseTag
                                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    data-tw-toggle="modal" data-tw-target="#basic-slide-over-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagShow سرریزHTMLOpenTag/aHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: سرریز Toggle --HTMLCloseTag
                                                HTMLOpenTag!-- BEGIN: سرریز Content --HTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-backdrop=""
    aria-hidden="true"
    tabindex="-1"
    id="basic-slide-over-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="w-[90%] rtl:mr-auto ltr:ml-auto h-screen flex flex-col bg-white relative shadow-md rtl:transition-[margin-left] ltr:transition-[margin-right] duration-[0.6s] rtl:-ml-[100%] ltr:-mr-[100%] rtl:group-[.show]:ml-0 ltr:group-[.show]:mr-0 dark:bg-darkmode-600 sm:w-[460px]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400 p-5"
HTMLCloseTagHTMLOpenTagh2 class="rtl:ml-auto ltr:mr-auto text-base font-medium"HTMLCloseTag
                                                                سرریز خالی
                                                            HTMLOpenTag/h2HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    data-tw-merge
    class="p-5 overflow-y-auto flex-1"
HTMLCloseTagاین کاملاً اسلاید خالی عالی است!HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: سرریز Content --HTMLCloseTag
            
        

آیا می خواهید اطلاعات اضافی را نمایش دهید، ورودی کاربر را جمع آوری کنید یا به روز رسانی های مهم را ارائه دهید، "Blank اسلاید‌اور" یک راه حل انعطاف پذیر است که اطمینان می دهد محتوای شما قابل دسترس و جذاب باقی مانده است. کاوش کنید امکانات و راه های جدیدی برای تعامل باز کنید مخاطب خود با استفاده از مؤلفه "Blank اسلاید‌اور".

سایز سرریز

کامپوننت "اندازه پنجره کشویی" به شما این امکان را می دهد که ابعاد پنجره های کشویی خود را کنترل کنید و اطمینان حاصل کنید که آنها از نظر بصری جذاب و کاملاً متناسب با محتوای شما هستند. با چندین گزینه اندازه در دسترس، شما می توانید موردی را انتخاب کنید که بهترین تناسب را داشته باشد.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: کوچک سرریز Toggle --HTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    data-tw-toggle="modal" data-tw-target="#small-slide-over-size-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mb-2 rtl:ml-1 ltr:mr-1 mb-2 rtl:ml-1 ltr:mr-1"
HTMLCloseTagShow کوچک سرریزHTMLOpenTag/aHTMLCloseTag
                                                    HTMLOpenTag!-- END: کوچک سرریز Toggle --HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: متوسط سرریز Toggle --HTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    data-tw-toggle="modal" data-tw-target="#medium-slide-over-size-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mb-2 rtl:ml-1 ltr:mr-1 mb-2 rtl:ml-1 ltr:mr-1"
HTMLCloseTagShow متوسط سرریزHTMLOpenTag/aHTMLCloseTag
                                                    HTMLOpenTag!-- END: متوسط سرریز Toggle --HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: بزرگ سرریز Toggle --HTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    data-tw-toggle="modal" data-tw-target="#large-slide-over-size-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mb-2 rtl:ml-1 ltr:mr-1 mb-2 rtl:ml-1 ltr:mr-1"
HTMLCloseTagShow بزرگ سرریزHTMLOpenTag/aHTMLCloseTag
                                                    HTMLOpenTag!-- END: بزرگ سرریز Toggle --HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: Super بزرگ سرریز Toggle --HTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    data-tw-toggle="modal" data-tw-target="#superlarge-slide-over-size-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mb-2 rtl:ml-1 ltr:mr-1 mb-2 rtl:ml-1 ltr:mr-1"
HTMLCloseTagShow Superlarge سرریزHTMLOpenTag/aHTMLCloseTag
                                                    HTMLOpenTag!-- END: Super بزرگ سرریز Toggle --HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- BEGIN: کوچک سرریز Content --HTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-backdrop=""
    aria-hidden="true"
    tabindex="-1"
    id="small-slide-over-size-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="w-[90%] rtl:mr-auto ltr:ml-auto h-screen flex flex-col bg-white relative shadow-md rtl:transition-[margin-left] ltr:transition-[margin-right] duration-[0.6s] rtl:-ml-[100%] ltr:-mr-[100%] rtl:group-[.show]:ml-0 ltr:group-[.show]:mr-0 dark:bg-darkmode-600  sm:w-[300px]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400 p-5"
HTMLCloseTagHTMLOpenTagh2 class="rtl:ml-auto ltr:mr-auto text-base font-medium"HTMLCloseTag
                                                                کوچک سرریز
                                                            HTMLOpenTag/h2HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    data-tw-merge
    class="p-5 overflow-y-auto flex-1"
HTMLCloseTagاین یک پنجره کشویی کوچک فوق العاده است!HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: کوچک سرریز Content --HTMLCloseTag
                                                HTMLOpenTag!-- BEGIN: متوسط سرریز Content --HTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-backdrop=""
    aria-hidden="true"
    tabindex="-1"
    id="medium-slide-over-size-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="w-[90%] rtl:mr-auto ltr:ml-auto h-screen flex flex-col bg-white relative shadow-md rtl:transition-[margin-left] ltr:transition-[margin-right] duration-[0.6s] rtl:-ml-[100%] ltr:-mr-[100%] rtl:group-[.show]:ml-0 ltr:group-[.show]:mr-0 dark:bg-darkmode-600 sm:w-[460px]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400 p-5"
HTMLCloseTagHTMLOpenTagh2 class="rtl:ml-auto ltr:mr-auto text-base font-medium"HTMLCloseTag
                                                                متوسط سرریز
                                                            HTMLOpenTag/h2HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    data-tw-merge
    class="p-5 overflow-y-auto flex-1"
HTMLCloseTagاین یک پنجره کشویی متوسط فوق العاده است!HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: متوسط سرریز Content --HTMLCloseTag
                                                HTMLOpenTag!-- BEGIN: بزرگ سرریز Content --HTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-backdrop=""
    aria-hidden="true"
    tabindex="-1"
    id="large-slide-over-size-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="w-[90%] rtl:mr-auto ltr:ml-auto h-screen flex flex-col bg-white relative shadow-md rtl:transition-[margin-left] ltr:transition-[margin-right] duration-[0.6s] rtl:-ml-[100%] ltr:-mr-[100%] rtl:group-[.show]:ml-0 ltr:group-[.show]:mr-0 dark:bg-darkmode-600   sm:w-[600px]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400 p-5"
HTMLCloseTagHTMLOpenTagh2 class="rtl:ml-auto ltr:mr-auto text-base font-medium"HTMLCloseTag
                                                                بزرگ سرریز
                                                            HTMLOpenTag/h2HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    data-tw-merge
    class="p-5 overflow-y-auto flex-1"
HTMLCloseTagاین یک پنجره کشویی بزرگ فوق العاده است!HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: بزرگ سرریز Content --HTMLCloseTag
                                                HTMLOpenTag!-- BEGIN: Super بزرگ سرریز Content --HTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-backdrop=""
    aria-hidden="true"
    tabindex="-1"
    id="superlarge-slide-over-size-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="w-[90%] rtl:mr-auto ltr:ml-auto h-screen flex flex-col bg-white relative shadow-md rtl:transition-[margin-left] ltr:transition-[margin-right] duration-[0.6s] rtl:-ml-[100%] ltr:-mr-[100%] rtl:group-[.show]:ml-0 ltr:group-[.show]:mr-0 dark:bg-darkmode-600    sm:w-[600px] lg:w-[900px]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400 p-5"
HTMLCloseTagHTMLOpenTagh2 class="rtl:ml-auto ltr:mr-auto text-base font-medium"HTMLCloseTag
                                                                Superlarge سرریز
                                                            HTMLOpenTag/h2HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    data-tw-merge
    class="p-5 overflow-y-auto flex-1"
HTMLCloseTagاین یک پنجره کشویی فوق العاده با اندازه بزرگ است!HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: Super بزرگ سرریز Content --HTMLCloseTag
            
        

اندازهٔ لغزش خود را تنظیم کنید تا تجربه‌ای کاربری دوستانه و جذاب را ایجاد کنید. آیا به یک اعلان فشرده نیاز دارید یا به یک فرم فضا‌پذیر؟ اجزای "اندازهٔ لغزش" به شما امکان می‌دهد که با انعطاف، طرح موردنظر خود را به دست آورید. گزینه‌های مختلف اندازه را کاوش کنید و تجربهٔ کاربری وب‌سایت خود را با استفاده از اجزای "اندازهٔ لغزش" به سطح بالاتری برسانید.

سرریز با دکمه بستن

اجزای "لغزش با دکمه بستن" لایه‌ای اضافی از راحتی کاربر را به دیالوگ‌های لغزشی شما اضافه می‌کند. این ویژگی به کاربران اجازه می‌دهد تا با کلیک بر روی یک دکمه بستن، به‌طور آسان دیالوگ لغزش را ببندند و تجربه کاربری را بهبود بخشند.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTag!-- BEGIN: مودال Toggle --HTMLCloseTag
                                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    data-tw-toggle="modal" data-tw-target="#button-slide-over-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagShow سرریزHTMLOpenTag/aHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: مودال Toggle --HTMLCloseTag
                                                HTMLOpenTag!-- BEGIN: مودال Content --HTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-backdrop="static"
    aria-hidden="true"
    tabindex="-1"
    id="button-slide-over-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="w-[90%] rtl:mr-auto ltr:ml-auto h-screen flex flex-col bg-white relative shadow-md rtl:transition-[margin-left] ltr:transition-[margin-right] duration-[0.6s] rtl:-ml-[100%] ltr:-mr-[100%] rtl:group-[.show]:ml-0 ltr:group-[.show]:mr-0 dark:bg-darkmode-600 sm:w-[460px]"
HTMLCloseTagHTMLOpenTaga
                                                            class="absolute top-0 rtl:right-0 ltr:left-0 rtl:left-auto ltr:right-auto mt-4 rtl:-mr-10 ltr:-ml-10 rtl:sm:-mr-12 ltr:sm:-ml-12"
                                                            data-tw-dismiss="modal"
                                                            href="#"
                                                        HTMLCloseTag
                                                            HTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 w-8 h-8 text-slate-400 w-8 h-8 text-slate-400"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        HTMLOpenTag/aHTMLCloseTag
                                                        HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400 p-5"
HTMLCloseTagHTMLOpenTagh2 class="rtl:ml-auto ltr:mr-auto text-base font-medium"HTMLCloseTag
                                                                سرریز با دکمه بستن
                                                            HTMLOpenTag/h2HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    data-tw-merge
    class="p-5 overflow-y-auto flex-1"
HTMLCloseTagاین یک پنجره کشویی فوق العاده با دکمه بستن است!HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: مودال Content --HTMLCloseTag
            
        

اجزای "سرریز با دکمه بستن" با ارائه روشی واضح و ساده برای بستن دیالوگ لغزش، تعامل کاربر را بهبود می‌بخشد. این ویژگی به ویژه در حالت‌هایی مفید است که کاربران ممکن است بخواهند به سرعت از دیالوگ خارج شوند یا آن را کمینه کنند بدون اینکه از صفحه فعلی جابجا شوند.

تداخل سرریز

"سرریز همپوشان" ویژگی چندکاره‌ای است که به شما امکان می‌دهد دیالوگ‌های لغزشی لایه‌بندی شده در برنامه وب خود ایجاد کنید. این ویژگی برای حالاتی که نیاز به ارائه اطلاعات یا اقدامات به ترتیبی دارید و در عین حال کاربر را متمرکز نگه می‌دارید، عالی است.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTag!-- BEGIN: سرریز Toggle --HTMLCloseTag
                                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    data-tw-toggle="modal" data-tw-target="#overlapping-slide-over-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagShow سرریزHTMLOpenTag/aHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: سرریز Toggle --HTMLCloseTag
                                                HTMLOpenTag!-- BEGIN: سرریز Content --HTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-backdrop=""
    aria-hidden="true"
    tabindex="-1"
    id="overlapping-slide-over-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="w-[90%] rtl:mr-auto ltr:ml-auto h-screen flex flex-col bg-white relative shadow-md rtl:transition-[margin-left] ltr:transition-[margin-right] duration-[0.6s] rtl:-ml-[100%] ltr:-mr-[100%] rtl:group-[.show]:ml-0 ltr:group-[.show]:mr-0 dark:bg-darkmode-600 sm:w-[460px]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400 p-5"
HTMLCloseTagHTMLOpenTagh2 class="rtl:ml-auto ltr:mr-auto text-base font-medium"HTMLCloseTag
                                                                تداخل سرریز
                                                            HTMLOpenTag/h2HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    data-tw-merge
    class="p-5 overflow-y-auto flex-1 px-5 py-10"
HTMLCloseTagHTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                                HTMLOpenTagdiv class="mb-5"HTMLCloseTag
                                                                    برای نمایش اسلاید روی هم بر روی دکمه زیر کلیک کنید!
                                                                    روی هم!
                                                                HTMLOpenTag/divHTMLCloseTag
                                                                HTMLOpenTag!-- BEGIN: تداخل سرریز Toggle --HTMLCloseTag
                                                                HTMLOpenTaga
    data-tw-merge
    data-tw-toggle="modal" data-tw-target="#next-overlapping-slide-over-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagShow تداخل سرریزHTMLOpenTag/aHTMLCloseTag
                                                                HTMLOpenTag!-- END: تداخل سرریز Toggle --HTMLCloseTag
                                                                HTMLOpenTag!-- BEGIN: تداخل سرریز Content --HTMLCloseTag
                                                                HTMLOpenTagdiv
    data-tw-backdrop=""
    aria-hidden="true"
    tabindex="-1"
    id="next-overlapping-slide-over-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="w-[90%] rtl:mr-auto ltr:ml-auto h-screen flex flex-col bg-white relative shadow-md rtl:transition-[margin-left] ltr:transition-[margin-right] duration-[0.6s] rtl:-ml-[100%] ltr:-mr-[100%] rtl:group-[.show]:ml-0 ltr:group-[.show]:mr-0 dark:bg-darkmode-600 sm:w-[460px]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400 p-5"
HTMLCloseTagHTMLOpenTagh2 class="rtl:ml-auto ltr:mr-auto text-base font-medium"HTMLCloseTag
                                                                                تداخل سرریز
                                                                            HTMLOpenTag/h2HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                                        HTMLOpenTagdiv
    data-tw-merge
    class="p-5 overflow-y-auto flex-1 text-center"
HTMLCloseTagاین یک اسلاید روی هم فوق العاده است
                                                                            روی هم!HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                                HTMLOpenTag!-- END: تداخل سرریز Content --HTMLCloseTag
                                                            HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: سرریز Content --HTMLCloseTag
            
        

ویژگی "سرریز همپوشان" روشی کاربرپسند برای به تدریج ارائه اطلاعات یا اقدامات فراهم می‌کند، تضمین می‌کند که کاربران بتوانند به یک قطعه محتوا در یک زمان تمرکز کنند. این ابزار ارزشمندی برای ایجاد تجربیات کاربری جذاب و هدایت کاربران در جریان فرآیندهای پیچیده است. امکانات این ویژگی را بررسی کنید تا قابلیت استفاده و تعاملیت برنامه وب‌تان را ارتقا دهید.

فوتر و هدر سرریز

اجزای "سرریز با هدر و پاورقی" ابزاری قدرتمند برای ایجاد دیالوگ‌های لغزشی با هدر و پاورقی‌های سفارشی است. این ویژگی به شما امکان می‌دهد که محتوا را به کاربران خود ارائه دهید در حالی که یک رابط کاربری یکپارچه را حفظ می‌کنید و امکانات اضافی را در بخش‌های هدر و پاورقی فراهم می‌کنید.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTag!-- BEGIN: سرریز Toggle --HTMLCloseTag
                                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    data-tw-toggle="modal" data-tw-target="#header-footer-slide-over-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagShow سرریزHTMLOpenTag/aHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: سرریز Toggle --HTMLCloseTag
                                                HTMLOpenTag!-- BEGIN: سرریز Content --HTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-backdrop="static"
    aria-hidden="true"
    tabindex="-1"
    id="header-footer-slide-over-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTag!-- BEGIN: سرریز سربرگ --HTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-[90%] rtl:mr-auto ltr:ml-auto h-screen flex flex-col bg-white relative shadow-md rtl:transition-[margin-left] ltr:transition-[margin-right] duration-[0.6s] rtl:-ml-[100%] ltr:-mr-[100%] rtl:group-[.show]:ml-0 ltr:group-[.show]:mr-0 dark:bg-darkmode-600 sm:w-[460px]"
HTMLCloseTagHTMLOpenTaga
                                                            class="absolute top-0 rtl:right-0 ltr:left-0 rtl:left-auto ltr:right-auto mt-4 rtl:-mr-10 ltr:-ml-10 rtl:sm:-mr-12 ltr:sm:-ml-12"
                                                            data-tw-dismiss="modal"
                                                            href="#"
                                                        HTMLCloseTag
                                                            HTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 w-8 h-8 text-slate-400 w-8 h-8 text-slate-400"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        HTMLOpenTag/aHTMLCloseTag
                                                        HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400"
HTMLCloseTagHTMLOpenTagh2 class="rtl:ml-auto ltr:mr-auto text-base font-medium"HTMLCloseTag
                                                                پیام پخش
                                                            HTMLOpenTag/h2HTMLCloseTag
                                                            HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed border-secondary text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 [&:hover:not(:disabled)]:bg-secondary/20 [&:hover:not(:disabled)]:dark:bg-darkmode-100/10 hidden sm:flex hidden sm:flex"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="file"
    class="stroke-[1] w-5 h-5 w-4 h-4 rtl:ml-2 ltr:mr-2 w-4 h-4 rtl:ml-2 ltr:mr-2"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                                دانلود اسنادHTMLOpenTag/buttonHTMLCloseTag
                                                            HTMLOpenTagdiv
    data-tw-merge
    data-tw-placement="bottom-start"
    class="dropdown relative sm:hidden"
HTMLCloseTagHTMLOpenTaga
        data-tw-toggle="dropdown"
        aria-expanded="false"
        href="javascript:;" class="cursor-pointer block w-5 h-5"
    HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="more-horizontal"
    class="stroke-[1] w-5 h-5 w-5 h-5 text-slate-500 w-5 h-5 text-slate-500"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
        HTMLOpenTag/aHTMLCloseTag
                                                                HTMLOpenTagdiv
        data-transition
        data-selector=".show"
        data-enter="transition-all ease-linear duration-150"
        data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
        data-enter-to="!mt-1 visible opacity-100 translate-y-0"
        data-leave="transition-all ease-linear duration-150"
        data-leave-from="!mt-1 visible opacity-100 translate-y-0"
        data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
        class="dropdown-menu absolute z-[9999] hidden"
    HTMLCloseTagHTMLOpenTagdiv
        data-tw-merge
        class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
    HTMLCloseTag
        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="file"
    class="stroke-[1] w-5 h-5 w-4 h-4 rtl:ml-2 ltr:mr-2 w-4 h-4 rtl:ml-2 ltr:mr-2"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                                        دانلود اسنادHTMLOpenTag/aHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag!-- END: سرریز سربرگ --HTMLCloseTag
                                                        HTMLOpenTag!-- BEGIN: سرریز Body --HTMLCloseTag
                                                        HTMLOpenTagdiv
    data-tw-merge
    class="p-5 overflow-y-auto flex-1"
HTMLCloseTagHTMLOpenTagdivHTMLCloseTag
                                                                HTMLOpenTaglabel
    data-tw-merge
    for="modal-form-1" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left"
HTMLCloseTag
    از
HTMLOpenTag/labelHTMLCloseTag
                                                                HTMLOpenTaginput
    data-tw-merge
    id="modal-form-1" type="text" placeholder="example@gmail.com" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
HTMLCloseTag
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                                HTMLOpenTaglabel
    data-tw-merge
    for="modal-form-2" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left"
HTMLCloseTag
    تا
HTMLOpenTag/labelHTMLCloseTag
                                                                HTMLOpenTaginput
    data-tw-merge
    id="modal-form-2" type="text" placeholder="example@gmail.com" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
HTMLCloseTag
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                                HTMLOpenTaglabel
    data-tw-merge
    for="modal-form-3" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left"
HTMLCloseTag
    Subject
HTMLOpenTag/labelHTMLCloseTag
                                                                HTMLOpenTaginput
    data-tw-merge
    id="modal-form-3" type="text" placeholder="Important Meeting" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
HTMLCloseTag
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                                HTMLOpenTaglabel
    data-tw-merge
    for="modal-form-4" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left"
HTMLCloseTag
    کلمات را دارد
HTMLOpenTag/labelHTMLCloseTag
                                                                HTMLOpenTaginput
    data-tw-merge
    id="modal-form-4" type="text" placeholder="Job, Work, سندation" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
HTMLCloseTag
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                                HTMLOpenTaglabel
    data-tw-merge
    for="modal-form-5" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left"
HTMLCloseTag
    ندارد
HTMLOpenTag/labelHTMLCloseTag
                                                                HTMLOpenTaginput
    data-tw-merge
    id="modal-form-5" type="text" placeholder="Job, Work, سندation" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
HTMLCloseTag
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                                HTMLOpenTaglabel
    data-tw-merge
    for="modal-form-6" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left"
HTMLCloseTag
    اندازه
HTMLOpenTag/labelHTMLCloseTag
                                                                HTMLOpenTagselect
    data-tw-merge
    id="modal-form-6" class="disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50 [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md py-2 px-3 rtl:pl-8 ltr:pr-8 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 group-[.form-inline]:flex-1"
HTMLCloseTag
    HTMLOpenTagoptionHTMLCloseTag10HTMLOpenTag/optionHTMLCloseTag
                                                                    HTMLOpenTagoptionHTMLCloseTag25HTMLOpenTag/optionHTMLCloseTag
                                                                    HTMLOpenTagoptionHTMLCloseTag35HTMLOpenTag/optionHTMLCloseTag
                                                                    HTMLOpenTagoptionHTMLCloseTag50HTMLOpenTag/optionHTMLCloseTag
HTMLOpenTag/selectHTMLCloseTag
                                                            HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag!-- END: سرریز Body --HTMLCloseTag
                                                        HTMLOpenTag!-- BEGIN: سرریز Footer --HTMLCloseTag
                                                        HTMLOpenTagdiv
    class="px-5 py-3 rtl:text-left ltr:text-right border-t border-slate-200/60 dark:border-darkmode-400"
HTMLCloseTagHTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="modal" type="button" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed border-secondary text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 [&:hover:not(:disabled)]:bg-secondary/20 [&:hover:not(:disabled)]:dark:bg-darkmode-100/10 w-20 rtl:ml-1 ltr:mr-1 w-20 rtl:ml-1 ltr:mr-1"
HTMLCloseTagCancelHTMLOpenTag/buttonHTMLCloseTag
                                                            HTMLOpenTagbutton
    data-tw-merge
    type="button" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary w-20 w-20"
HTMLCloseTagSendHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag!-- END: سرریز Footer --HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: سرریز Content --HTMLCloseTag
            
        

اجزای "سرریز با هدر و پاورقی" به شما امکان می‌دهد تا دیالوگ‌های لغزشی پویا و اطلاعاتی و همچنین تعاملی ایجاد کنید. شما به راحتی می‌توانید بخش‌های هدر و پاورقی را به نیازهای برنامه‌ی‌تان تنظیم کنید، که این امر باعث می‌شود که این ابزار یک راه‌حل چندکاره برای طیف گسترده‌ای از موارد استفاده باشد. تجربه کاربری خود را با ارائه محتوا به وضوح و ارائه اقدامات شفاف و کاربرپسند به کاربران از طریق این ویژگی بهبود ببخشید.

نمایش/مخفی کردن سرریز به صورت برنامه‌نویسی

ویژگی "نمایش/مخفی کردن لغزش به صورت برنامه‌نویسی" به شما امکان می‌دهد تا از طریق کد خود، قابلیت کنترل دیداری دیالوگ لغزش را داشته باشید. این قابلیت به شما اجازه می‌دهد تا به صورت برنامه‌نویسی، باز و بسته کردن یا تغییر وضعیت لغزش را آغاز کنید و تجربه کاربری پیوسته و تعاملی را فراهم کنید.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTag!-- BEGIN: Show سرریز Toggle --HTMLCloseTag
                                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    id="programmatically-show-slideover" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mb-2 rtl:ml-1 ltr:mr-1 mb-2 rtl:ml-1 ltr:mr-1"
HTMLCloseTagShow سرریزHTMLOpenTag/aHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: Show سرریز Toggle --HTMLCloseTag
                                                HTMLOpenTag!-- BEGIN: سرریز Content --HTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-backdrop=""
    aria-hidden="true"
    tabindex="-1"
    id="programmatically-slideover" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="w-[90%] rtl:mr-auto ltr:ml-auto h-screen flex flex-col bg-white relative shadow-md rtl:transition-[margin-left] ltr:transition-[margin-right] duration-[0.6s] rtl:-ml-[100%] ltr:-mr-[100%] rtl:group-[.show]:ml-0 ltr:group-[.show]:mr-0 dark:bg-darkmode-600 sm:w-[460px]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400 p-5"
HTMLCloseTagHTMLOpenTagh2 class="rtl:ml-auto ltr:mr-auto text-base font-medium"HTMLCloseTag
                                                                نمایش/مخفی کردن سرریز به صورت برنامه‌نویسی
                                                            HTMLOpenTag/h2HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    data-tw-merge
    class="p-5 overflow-y-auto flex-1 p-10 text-center"
HTMLCloseTagHTMLOpenTag!-- BEGIN: Hide سرریز Toggle --HTMLCloseTag
                                                            HTMLOpenTaga
    data-tw-merge
    id="programmatically-hide-slideover" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary rtl:ml-1 ltr:mr-1 rtl:ml-1 ltr:mr-1"
HTMLCloseTagHide سرریزHTMLOpenTag/aHTMLCloseTag
                                                            HTMLOpenTag!-- END: Hide سرریز Toggle --HTMLCloseTag
                                                            HTMLOpenTag!-- BEGIN: Toggle سرریز Toggle --HTMLCloseTag
                                                            HTMLOpenTaga
    data-tw-merge
    id="programmatically-toggle-slideover" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mt-2 rtl:ml-1 ltr:mr-1 sm:mt-0 mt-2 rtl:ml-1 ltr:mr-1 sm:mt-0"
HTMLCloseTagToggle سرریزHTMLOpenTag/aHTMLCloseTag
                                                            HTMLOpenTag!-- END: Toggle سرریز Toggle --HTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: سرریز Content --HTMLCloseTag
            
        

ویژگی "نمایش/مخفی کردن لغزش به صورت برنامه‌نویسی" قابلیت کنترل شما را بر روی دیالوگ لغزش تقویت می‌کند، آن را به یک عنصر پویا و واکنش‌گرا در رابط کاربری‌تان تبدیل می‌کند. با استفاده از این روش‌های برنامه‌نویسی، می‌توانید تجربیات کاربری جذابی ایجاد کرده و دیداری لغزش را بر اساس نیازهای برنامه‌ی‌تان شخصی‌سازی کنید. سواء برای نمایش اطلاعات اضافی، جمع‌آوری ورودی کاربر یا ارائه تعاملات مبتنی بر متن، این ویژگی به شما امکان می‌دهد که کنترل کاملی را بر دیالوگ‌های لغزش خود داشته باشید.

رابط اجزاء

در این بخش، شما اطلاعات دقیقی درباره ویژگی‌ها، کلاس‌ها، و گزینه‌های موجود که می‌توان با این مؤلفه استفاده کرد را پیدا خواهید کرد. درک این ویژگی‌ها برای سفارشی‌سازی و پیکربندی مؤلفه برای تنظیمات خاص شما بسیار مهم است.

در زیر لیستی از ویژگی‌هایی که می‌توان به اجزاء منتقل کرد، آمده است:

Slideover
پراپ نوع شرح
`as` `string` نوع عنصر HTML برای استفاده از اسلاید اوور (پیش‌فرض "div" است).
`open` `boolean` نشان می‌دهد که آیا اسلاید اوور باز یا بسته است (پیش‌فرض false است).
`onClose` `function` یک تابعی که هنگام بسته شدن سرریز فراخوانی می‌شود.
`staticBackdrop` `boolean` اگر true باشد، پس زمینه اسلاید‌اوور ثابت می‌ماند زمانی که اسلاید‌اوور بسته می‌شود (پیش‌فرض false است).
`size` `Size` اندازهٔ اسلاید‌اور می‌تواند "sm" یا "md" باشد (پیش‌فرض "md" است).
Slideover.Panel
پراپ نوع شرح
`as` `string` نوع عنصر HTML برای پنل اسلاید‌اوور می‌تواند "div" باشد (پیش‌فرض "div" است).
Slideover.Title
پراپ نوع شرح
`as` `string` نوع عنصر HTML برای عنوان اسلاید‌اوور می‌تواند "div" باشد (پیش‌فرض "div" است).
Slideover.Description
پراپ نوع شرح
`as` `string` نوع عنصر HTML برای توضیحات اسلاید‌اوور می‌تواند "div" باشد (پیش‌فرض "div" است).
Slideover.Footer
پراپ نوع شرح
`as` `string` نوع عنصر HTML برای فوتر اسلاید‌اوور می‌تواند "div" باشد (پیش‌فرض "div" است).