اطلاعیه
پایه اطلاعیه

اطلاعیه‌ها provide a way to communicate important پیام‌ها یا به‌روزرسانی‌ها را به کاربران خود ارائه می‌دهند. این بخش دو نوع اعلان پایه را پوشش می‌دهد: دو نوع اعلان پایه: غیر چسبان و چسبان. اعلان‌ها.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: اطلاعیه Content --HTMLCloseTag
                                                    HTMLOpenTagdiv
    id="basic-non-sticky-notification-content" class="py-5 rtl:pr-5 ltr:pl-5 rtl:pl-14 ltr:pr-14 bg-white border border-slate-200/60 rounded-lg shadow-xl dark:bg-darkmode-600 dark:text-slate-300 dark:border-darkmode-600 hidden flex flex flex-col sm:flex-row flex flex-col sm:flex-row"HTMLCloseTag
    HTMLOpenTagdiv class="font-medium"HTMLCloseTag
                                                            وای! به‌روزرسانی‌ها منتشر شدند!
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTaga
                                                            class="mt-1 font-medium text-primary dark:text-slate-400 rtl:sm:mr-40 ltr:sm:ml-40 sm:mt-0"
                                                            href=""
                                                        HTMLCloseTag
                                                            بررسی تغییرات
                                                        HTMLOpenTag/aHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag!-- END: اطلاعیه Content --HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: اطلاعیه Toggle --HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    id="basic-non-sticky-notification-toggle" 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"
HTMLCloseTagShow Non Sticky اطلاعیهHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    id="basic-sticky-notification-toggle" 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 sm:mt-0 mt-2 sm:mt-0"
HTMLCloseTagShow Sticky اطلاعیهHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTag!-- END: اطلاعیه Toggle --HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        
            
                // پایه non sticky notification
                                                $("#basic-non-sticky-notification-toggle").on("click", function () {
                                                Toastify({
                                                node: $("#basic-non-sticky-notification-content")
                                                .clone()
                                                .removeClass("hidden")[0],
                                                مدت: 3000,
                                                newWindow: true,
                                                close: true,
                                                gravity: "top",
                                                position: "right",
                                                backgroundColor: "white",
                                                stopOnFocus: true,
                                                }).showToast();
                                                });
                                                // پایه sticky notification
                                                $("#basic-sticky-notification-toggle").on("click", function () {
                                                Toastify({
                                                node: $("#basic-non-sticky-notification-content")
                                                .clone()
                                                .removeClass("hidden")[0],
                                                duration: -1,
                                                newWindow: true,
                                                close: true,
                                                gravity: "top",
                                                position: "right",
                                                backgroundColor: "white",
                                                stopOnFocus: true,
                                                }).showToast();
                                                });

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

موفقیت اطلاعیه

موفقیت notifications are a way to provide positive را با موفقیت انجام می‌دهند. این بخش نشان می‌دهد که چگونه اعلان‌های موفقیت را ایجاد و استفاده کنید. and use success اعلان‌ها.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: اطلاعیه Content --HTMLCloseTag
                                                    HTMLOpenTagdiv
    id="success-notification-content" class="py-5 rtl:pr-5 ltr:pl-5 rtl:pl-14 ltr:pr-14 bg-white border border-slate-200/60 rounded-lg shadow-xl dark:bg-darkmode-600 dark:text-slate-300 dark:border-darkmode-600 hidden flex flex flex"HTMLCloseTag
    HTMLOpenTagi
    data-tw-merge
    data-lucide="check-circle"
    class="stroke-[1] w-5 h-5 text-success text-success"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        HTMLOpenTagdiv class="rtl:mr-4 ltr:ml-4 rtl:ml-4 ltr:mr-4"HTMLCloseTag
                                                            HTMLOpenTagdiv class="font-medium"HTMLCloseTagپیام ذخیره شد!HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-1 text-slate-500"HTMLCloseTag
                                                                پیام در ۵ دقیقه ارسال خواهد شد.
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag!-- END: اطلاعیه Content --HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: اطلاعیه Toggle --HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    id="success-notification-toggle" 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/buttonHTMLCloseTag
                                                    HTMLOpenTag!-- END: اطلاعیه Toggle --HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        
            
                // موفقیت notification
                                                $("#success-notification-toggle").on("click", function () {
                                                Toastify({
                                                node: $("#success-notification-content")
                                                .clone()
                                                .removeClass("hidden")[0],
                                                duration: -1,
                                                newWindow: true,
                                                close: true,
                                                gravity: "top",
                                                position: "right",
                                                stopOnFocus: true,
                                                }).showToast();
                                                });

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

اطلاعیه با عملیات‌ها

اطلاعیه‌ها with actions allow you to provide users گزینه‌های واضحی پس از دریافت یک اعلان ارائه دهید. این بخش نشان می‌دهد که چگونه اعلان‌های با اقدامات را ایجاد و استفاده کنید.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: اطلاعیه Content --HTMLCloseTag
                                                    HTMLOpenTagdiv
    id="notification-with-actions-content" class="py-5 rtl:pr-5 ltr:pl-5 rtl:pl-14 ltr:pr-14 bg-white border border-slate-200/60 rounded-lg shadow-xl dark:bg-darkmode-600 dark:text-slate-300 dark:border-darkmode-600 hidden flex flex flex"HTMLCloseTag
    HTMLOpenTagi
    data-tw-merge
    data-lucide="hard-drive"
    class="stroke-[1] w-5 h-5"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        HTMLOpenTagdiv class="rtl:mr-4 ltr:ml-4 rtl:ml-4 ltr:mr-4"HTMLCloseTag
                                                            HTMLOpenTagdiv class="font-medium"HTMLCloseTagذخیره سازی حذف شد!HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-1 text-slate-500"HTMLCloseTag
                                                                سرور در ۳۰ ثانیه دوباره راه‌اندازی خواهد شد، اقدامی ننمایید
                                                                HTMLOpenTagbrHTMLCloseTag
                                                                در طول فرآیند به‌روزرسانی!
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-1.5 flex font-medium"HTMLCloseTag
                                                                HTMLOpenTaga
                                                                    class="text-primary dark:text-slate-400"
                                                                    href=""
                                                                HTMLCloseTag
                                                                    هم اکنون راه‌اندازی مجدد کنید
                                                                HTMLOpenTag/aHTMLCloseTag
                                                                HTMLOpenTaga
                                                                    class="rtl:mr-3 ltr:ml-3 text-slate-500"
                                                                    href=""
                                                                HTMLCloseTag
                                                                    کنسل
                                                                HTMLOpenTag/aHTMLCloseTag
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag!-- END: اطلاعیه Content --HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: اطلاعیه Toggle --HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    id="notification-with-actions-toggle" 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/buttonHTMLCloseTag
                                                    HTMLOpenTag!-- END: اطلاعیه Toggle --HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        
            
                // اطلاعیه with actions
                                                $("#notification-with-actions-toggle").on("click", function () {
                                                Toastify({
                                                node: $("#notification-with-actions-content")
                                                .clone()
                                                .removeClass("hidden")[0],
                                                duration: -1,
                                                newWindow: true,
                                                close: true,
                                                gravity: "top",
                                                position: "right",
                                                stopOnFocus: true,
                                                }).showToast();
                                                });

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

اطلاعیه با آواتار

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

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: اطلاعیه Content --HTMLCloseTag
                                                    HTMLOpenTagdiv
    id="notification-with-avatar-content" class="py-5 rtl:pr-5 ltr:pl-5 rtl:pl-14 ltr:pr-14 bg-white border border-slate-200/60 rounded-lg shadow-xl dark:bg-darkmode-600 dark:text-slate-300 dark:border-darkmode-600 hidden flex flex flex"HTMLCloseTag
    HTMLOpenTagdiv
                                                            class="image-fit h-10 w-10 flex-none overflow-hidden rounded-full"HTMLCloseTag
                                                            HTMLOpenTagimg
                                                                src="dist/images/products/product4-400x400.jpg"
                                                                alt="تیل وایز - قالب داشبورد مدیریتی"
                                                            HTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv class="rtl:mr-4 ltr:ml-4 rtl:sm:ml-28 ltr:sm:mr-28"HTMLCloseTag
                                                            HTMLOpenTagdiv class="font-medium"HTMLCloseTag
                                                                لئوناردو دی‌کاپریو
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-1 text-slate-500"HTMLCloseTag
                                                                در زمانی دیگر شما را ملاقات خواهیم کرد! 😃😃😃
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTaga
                                                            class="absolute bottom-0 rtl:left-0 ltr:right-0 top-0 flex items-center rtl:border-r ltr:border-l border-slate-200/60 px-6 font-medium text-primary dark:border-darkmode-400 dark:text-slate-400"
                                                            data-dismiss="notification"
                                                            href="#"
                                                        HTMLCloseTag
                                                            پاسخ
                                                        HTMLOpenTag/aHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag!-- END: اطلاعیه Content --HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: اطلاعیه Toggle --HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    id="notification-with-avatar-toggle" 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/buttonHTMLCloseTag
                                                    HTMLOpenTag!-- END: اطلاعیه Toggle --HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        
            
                // اطلاعیه with avatar
                                                $("#notification-with-avatar-toggle").on("click", function () {
                                                // Init toastify
                                                let avatarNotification = Toastify({
                                                node: $("#notification-with-avatar-content")
                                                .clone()
                                                .removeClass("hidden")[0],
                                                duration: -1,
                                                newWindow: true,
                                                close: false,
                                                gravity: "top",
                                                position: "right",
                                                stopOnFocus: true,
                                                }).showToast();
                                                // Close notification event
                                                $(avatarNotification.toastElement)
                                                .find(\'[data-dismiss="notification"]\')
                                                .on("click", function () {
                                                avatarNotification.hideToast();
                                                });
                                                });

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

اطلاعیه با دکمه‌های تقسیم‌شده

اطلاعیه‌ها with split buttons allow you to provide گزینه‌های عمل چندگانه را در یک اعلان فراهم کنید. این بخش نشان می‌دهد که چگونه اعلان‌های با دکمه‌های تقسیم شده را ایجاد و استفاده کنید.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: اطلاعیه Content --HTMLCloseTag
                                                    HTMLOpenTagdiv
    id="notification-with-split-buttons-content" class="py-5 rtl:pr-5 ltr:pl-5 rtl:pl-14 ltr:pr-14 bg-white border border-slate-200/60 rounded-lg shadow-xl dark:bg-darkmode-600 dark:text-slate-300 dark:border-darkmode-600 hidden flex flex flex"HTMLCloseTag
    HTMLOpenTagdiv class="rtl:sm:ml-40 ltr:sm:mr-40"HTMLCloseTag
                                                            HTMLOpenTagdiv class="font-medium"HTMLCloseTag
                                                                معرفی تم جدید
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-1 text-slate-500"HTMLCloseTag
                                                                نسخه 2.3.3 را منتشر کنید
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
                                                            class="absolute bottom-0 rtl:left-0 ltr:right-0 top-0 flex flex-col rtl:border-r ltr:border-l border-slate-200/60 dark:border-darkmode-400"HTMLCloseTag
                                                            HTMLOpenTaga
                                                                class="flex flex-1 items-center justify-center border-b border-slate-200/60 px-6 font-medium text-primary dark:border-darkmode-400 dark:text-slate-400"
                                                                href="#"
                                                            HTMLCloseTag
                                                                مشاهده جزئیات
                                                            HTMLOpenTag/aHTMLCloseTag
                                                            HTMLOpenTaga
                                                                class="flex flex-1 items-center justify-center px-6 font-medium text-slate-500"
                                                                data-dismiss="notification"
                                                                href="#"
                                                            HTMLCloseTag
                                                                رد کردن
                                                            HTMLOpenTag/aHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag!-- END: اطلاعیه Content --HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: اطلاعیه Toggle --HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    id="notification-with-split-buttons-toggle" 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/buttonHTMLCloseTag
                                                    HTMLOpenTag!-- END: اطلاعیه Toggle --HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        
            
                // اطلاعیه with split buttons
                                                $("#notification-with-split-buttons-toggle").on("click", function () {
                                                // Init toastify
                                                let splitButtonsNotification = Toastify({
                                                node: $("#notification-with-split-buttons-content")
                                                .clone()
                                                .removeClass("hidden")[0],
                                                duration: -1,
                                                newWindow: true,
                                                close: false,
                                                gravity: "top",
                                                position: "right",
                                                stopOnFocus: true,
                                                }).showToast();
                                                // Close notification event
                                                $(splitButtonsNotification.toastElement)
                                                .find(\'[data-dismiss="notification"]\')
                                                .on("click", function () {
                                                splitButtonsNotification.hideToast();
                                                });
                                                });

اطلاعیه‌ها with split buttons enhance user با ارائه چندین اقدام در یک اعلان تنها. این ویژگی برای ارائه گزینه‌ها یا دسترسی سریع به اقدامات مربوط بدون اشغال کردن رابط اعلان مفید است. دکمه‌ها و اقدامات را به نیازها و نیازهای برنامه‌ی شما و تجربه کاربری بی‌درنگ سفارشی کنید. provide a seamless user با اندازه‌های مختلف آزمایش کنید تا اندازه‌ای را پیدا کنید که بهترین تطابق با اهداف طراحی شما را داشته باشد و تجربه کاربری بهینه را ارائه دهد.

اطلاعیه با دکمه‌های زیرین

اطلاعیه‌ها with buttons below allow you to include دکمه‌های عمل مستقیما زیر اعلان content. این بخش نشان می‌دهد که چگونه اعلان‌های با دکمه‌های تقسیم شده را ایجاد و استفاده کنید.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: اطلاعیه Content --HTMLCloseTag
                                                    HTMLOpenTagdiv
    id="notification-with-buttons-below-content" class="py-5 rtl:pr-5 ltr:pl-5 rtl:pl-14 ltr:pr-14 bg-white border border-slate-200/60 rounded-lg shadow-xl dark:bg-darkmode-600 dark:text-slate-300 dark:border-darkmode-600 hidden flex flex flex"HTMLCloseTag
    HTMLOpenTagi
    data-tw-merge
    data-lucide="file-text"
    class="stroke-[1] w-5 h-5"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        HTMLOpenTagdiv class="rtl:mr-4 ltr:ml-4 rtl:ml-5 ltr:mr-5 rtl:sm:ml-20 ltr:sm:mr-20"HTMLCloseTag
                                                            HTMLOpenTagdiv class="font-medium"HTMLCloseTag
                                                                لئوناردو دی‌کاپریو
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-1 text-slate-500"HTMLCloseTag
                                                                سند جدیدی برای شما ارسال شده است.
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-2.5"HTMLCloseTag
                                                                HTMLOpenTaga
    data-tw-merge
    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-2 ltr:mr-2 px-2 py-1 rtl:ml-2 ltr:mr-2 px-2 py-1"
HTMLCloseTagپیش‌نمایشHTMLOpenTag/aHTMLCloseTag
                                                                HTMLOpenTaga
    data-tw-merge
    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 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 px-2 py-1 px-2 py-1"
HTMLCloseTagدانلودHTMLOpenTag/aHTMLCloseTag
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag!-- END: اطلاعیه Content --HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: اطلاعیه Toggle --HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    id="notification-with-buttons-below-toggle" 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/buttonHTMLCloseTag
                                                    HTMLOpenTag!-- END: اطلاعیه Toggle --HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        
            
                // اطلاعیه with buttons below
                                                $("#notification-with-buttons-below-toggle").on("click", function () {
                                                // Init toastify
                                                Toastify({
                                                node: $("#notification-with-buttons-below-content")
                                                .clone()
                                                .removeClass("hidden")[0],
                                                duration: -1,
                                                newWindow: true,
                                                close: true,
                                                gravity: "top",
                                                position: "right",
                                                stopOnFocus: true,
                                                }).showToast();
                                                });

اعلان‌ها با دکمه‌های قرار گرفته زیر پیام، تعامل کاربران را افزایش می‌دهند، زیرا دکمه‌های عمل را مستقیماً زیر محتوای اعلان قرار می‌دهند. این طراحی به کاربران امکان می‌دهد که به سرعت پاسخ دهند یا اقدامات خاصی را انجام دهند که مرتبط با محتوای اعلان است. شما می‌توانید دکمه‌ها و محتوا را سفارشی کنید تا با نیازهای برنامه‌ی شما همخوانی داشته باشد و با آزمایش اندازه‌های مختلف، اندازه‌ای را پیدا کنید که بهترین تطابق با اهداف طراحی شما را داشته باشد و تجربه کاربری بهینه را ارائه دهید.

رابط اجزاء

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

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

Dialog
پراپ نوع شرح
`options` `options` یک شیء حاوی گزینه‌های پیکربندی رفتار اعلان است. تمامی رابط‌های برنامه‌نویسی موجود را از طریق پیوندهای مستندات مفید زیر بررسی کنید. https://apvarun.github.io/toastify-js/ .
`getRef` `(el: NotificationElement) => void` یک تابع بازخوانی برای دریافت مرجع به المان اعلان.