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

اجزای "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 Slideover" یک راه‌حل انعطاف‌پذیر است که مطمئن می‌شود محتوای شما قابل دسترسی و جذاب باقی بماند. امکانات را کاوش کنید و راه‌های جدیدی برای تعامل با مخاطبین خود با استفاده از اجزای "Blank Slideover" کشف کنید.

سایز سرریز

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

کد / پیش‌نمایش نمونه
            
                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
پراپ (Prop) نوع (Type) شرح
`as` `string` نوع عنصر HTML که باید برای اسلاید‌اور استفاده شود (پیش‌فرض "div").
`open` `boolean` مشخص می‌کند که آیا اسلاید‌اور باز است یا بسته (پیش‌فرض نادرست است).
`onClose` `function` یک تابع که زمانی که اسلاید‌اور بسته می‌شود فراخوانی می‌شود.
`staticBackdrop` `boolean` اگر صحیح باشد، پس‌زمینه اسلاید‌اور زمانی که اسلاید‌اور بسته است ثابت باقی می‌ماند. (پیش‌فرض نادرست است).
`size` `Size` اندازه اسلاید‌اور که می‌تواند "sm"، "md"، (پیش‌فرض "md").
Slideover.Panel
پراپ (Prop) نوع (Type) شرح
`as` `string` نوع عنصر HTML که برای پنل لغزشی (Slideover) استفاده می‌شود (پیش‌فرض "div" است).
Slideover.Title
پراپ (Prop) نوع (Type) شرح
`as` `string` نوع عنصر HTML که باید برای عنوان اسلاید‌اور استفاده شود (پیش‌فرض "div").
Slideover.Description
پراپ (Prop) نوع (Type) شرح
`as` `string` نوع عنصر HTML که باید برای توضیحات اسلاید‌اور استفاده شود (پیش‌فرض "div").
Slideover.Footer
پراپ (Prop) نوع (Type) شرح
`as` `string` نوع عنصر HTML که باید برای فوتر اسلاید‌اور استفاده شود (پیش‌فرض "div").