هشدار
پایه هشدارها

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

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="flex flex-col gap-2"HTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagهشدار ساده عالیHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300"
HTMLCloseTagهشدار ساده عالیHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-success border-success text-slate-900 dark:border-success"
HTMLCloseTagهشدار ساده عالیHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-warning border-warning text-slate-900 dark:border-warning"
HTMLCloseTagهشدار ساده عالیHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-pending border-pending text-white dark:border-pending"
HTMLCloseTagهشدار ساده عالیHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-danger border-danger text-white dark:border-danger"
HTMLCloseTagهشدار ساده عالیHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-dark border-dark text-white dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300"
HTMLCloseTagهشدار ساده عالیHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

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

آیکون هشدارها

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

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="flex flex-col gap-2"HTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-primary border-primary text-white dark:border-primary flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-circle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-octagon"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-success border-success text-slate-900 dark:border-success flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-triangle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-warning border-warning text-slate-900 dark:border-warning flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-circle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-pending border-pending text-white dark:border-pending flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-triangle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-danger border-danger text-white dark:border-danger flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-octagon"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-dark border-dark text-white dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-triangle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

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

هشدارها با محتوای بیشتر

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

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="flex flex-col gap-2"HTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagHTMLOpenTagdiv class="flex items-center"HTMLCloseTag
                                                            HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                                                هشدار شگفت‌انگیز با اطلاعات اضافی
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv
                                                                class="rtl:mr-auto ltr:ml-auto rounded-md bg-white px-1 text-xs text-slate-700"HTMLCloseTag
                                                                جدید
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                            لورم ایپسوم به سادگی متنی نمونه است که در صنعت چاپ و صفحه‌آرایی استفاده می‌شود. لورم ایپسوم از دهه 1500 میلادی به عنوان متن استاندارد صنعت استفاده شده است.
                                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300"
HTMLCloseTagHTMLOpenTagdiv class="flex items-center"HTMLCloseTag
                                                            HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                                                هشدار شگفت‌انگیز با اطلاعات اضافی
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv
                                                                class="rtl:mr-auto ltr:ml-auto rounded-md bg-slate-500 px-1 text-xs text-white"HTMLCloseTag
                                                                جدید
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                            لورم ایپسوم به سادگی متنی نمونه است که در صنعت چاپ و صفحه‌آرایی استفاده می‌شود. لورم ایپسوم از دهه 1500 میلادی به عنوان متن استاندارد صنعت استفاده شده است.
                                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-success border-success text-slate-900 dark:border-success"
HTMLCloseTagHTMLOpenTagdiv class="flex items-center"HTMLCloseTag
                                                            HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                                                هشدار شگفت‌انگیز با اطلاعات اضافی
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv
                                                                class="rtl:mr-auto ltr:ml-auto rounded-md bg-white px-1 text-xs text-slate-700"HTMLCloseTag
                                                                جدید
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                            لورم ایپسوم به سادگی متنی نمونه است که در صنعت چاپ و صفحه‌آرایی استفاده می‌شود. لورم ایپسوم از دهه 1500 میلادی به عنوان متن استاندارد صنعت استفاده شده است.
                                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-warning border-warning text-slate-900 dark:border-warning"
HTMLCloseTagHTMLOpenTagdiv class="flex items-center"HTMLCloseTag
                                                            HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                                                هشدار شگفت‌انگیز با اطلاعات اضافی
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv
                                                                class="rtl:mr-auto ltr:ml-auto rounded-md bg-white px-1 text-xs text-slate-700"HTMLCloseTag
                                                                جدید
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                            لورم ایپسوم به سادگی متنی نمونه است که در صنعت چاپ و صفحه‌آرایی استفاده می‌شود. لورم ایپسوم از دهه 1500 میلادی به عنوان متن استاندارد صنعت استفاده شده است.
                                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-pending border-pending text-white dark:border-pending"
HTMLCloseTagHTMLOpenTagdiv class="flex items-center"HTMLCloseTag
                                                            HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                                                هشدار شگفت‌انگیز با اطلاعات اضافی
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv
                                                                class="rtl:mr-auto ltr:ml-auto rounded-md bg-white px-1 text-xs text-slate-700"HTMLCloseTag
                                                                جدید
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                            لورم ایپسوم به سادگی متنی نمونه است که در صنعت چاپ و صفحه‌آرایی استفاده می‌شود. لورم ایپسوم از دهه 1500 میلادی به عنوان متن استاندارد صنعت استفاده شده است.
                                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-danger border-danger text-white dark:border-danger"
HTMLCloseTagHTMLOpenTagdiv class="flex items-center"HTMLCloseTag
                                                            HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                                                هشدار شگفت‌انگیز با اطلاعات اضافی
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv
                                                                class="rtl:mr-auto ltr:ml-auto rounded-md bg-white px-1 text-xs text-slate-700"HTMLCloseTag
                                                                جدید
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                            لورم ایپسوم به سادگی متنی نمونه است که در صنعت چاپ و صفحه‌آرایی استفاده می‌شود. لورم ایپسوم از دهه 1500 میلادی به عنوان متن استاندارد صنعت استفاده شده است.
                                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-dark border-dark text-white dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300"
HTMLCloseTagHTMLOpenTagdiv class="flex items-center"HTMLCloseTag
                                                            HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                                                هشدار شگفت‌انگیز با اطلاعات اضافی
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv
                                                                class="rtl:mr-auto ltr:ml-auto rounded-md bg-slate-500 px-1 text-xs text-white"HTMLCloseTag
                                                                جدید
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                            لورم ایپسوم به سادگی متنی نمونه است که در صنعت چاپ و صفحه‌آرایی استفاده می‌شود. لورم ایپسوم از دهه 1500 میلادی به عنوان متن استاندارد صنعت استفاده شده است.
                                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

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

هشدارهای آیکون دار و قابل رد کردن

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

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-primary border-primary text-white dark:border-primary mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-circle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="بستن"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 text-white"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300 mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-octagon"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="بستن"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 btn-close"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-success border-success text-slate-900 dark:border-success mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-triangle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="بستن"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 btn-close"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-warning border-warning text-slate-900 dark:border-warning mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-circle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="بستن"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 btn-close"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-pending border-pending text-white dark:border-pending mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-triangle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="بستن"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 btn-close"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-danger border-danger text-white dark:border-danger mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-octagon"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="بستن"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 text-white"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-dark border-dark text-white dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300 mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-triangle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="بستن"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 text-white"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag

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

هشدارهای خط دار

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

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 border-primary text-primary dark:border-primary mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-circle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="Close"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 btn-close"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 border-secondary text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-octagon"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="Close"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 btn-close"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 border-success text-success dark:border-success dark:border-success mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-triangle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="Close"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 btn-close"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 border-warning text-warning dark:border-warning mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-circle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="Close"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 btn-close"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 border-pending text-pending dark:border-pending mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-circle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="Close"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 btn-close"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 border-danger text-danger dark:border-danger mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-octagon"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="Close"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 btn-close"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 border-dark text-dark dark:border-darkmode-800 dark:text-slate-300 mb-2 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-triangle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                    هشدار شگفت‌انگیز با آیکون
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="alert"
    type="button"
    aria-label="Close"
    class="text-slate-800 py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 btn-close"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag

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

هشدارهای رنگ روشن

هشدارهای رنگی نرم یک راه دلپذیر و ملايم برای انتقال پیام‌های مهم با تن‌های رنگی نرم هستند. این بخش راهنمایی‌هایی را در خصوص استفاده مؤثر از این هشدارها برای بهبود تجربه کاربر ارائه می‌دهد.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="flex flex-col gap-2"HTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-primary border-primary bg-opacity-20 border-opacity-5 text-primary dark:border-opacity-100 dark:bg-opacity-20 dark:border-primary flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-circle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-slate-300 border-secondary bg-opacity-10 text-slate-500 dark:bg-darkmode-100/20 dark:border-darkmode-100/30 dark:text-slate-300 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-octagon"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-success border-success bg-opacity-20 border-opacity-5 text-success dark:border-success dark:border-opacity-20 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-triangle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-warning border-warning bg-opacity-20 border-opacity-5 text-warning dark:border-warning dark:border-opacity-20 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-circle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-pending border-pending bg-opacity-20 border-opacity-5 text-pending dark:border-pending dark:border-opacity-20 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-triangle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-danger border-danger bg-opacity-20 border-opacity-5 text-danger dark:border-danger dark:border-opacity-20 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-octagon"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    role="alert"
    class="alert relative border rounded-md px-5 py-4 bg-dark border-dark bg-opacity-20 border-opacity-5 text-dark dark:bg-darkmode-800/30 dark:border-darkmode-800/60 dark:text-slate-300 flex items-center"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="alert-triangle"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-6 w-6 rtl:ml-2 ltr:mr-2 h-6 w-6"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        هشدار شگفت‌انگیز با آیکونHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

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

رابط اجزاء

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

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

هشدار
پراپ نوع شرح
`dismissible` `boolean` نشان می‌دهد که آیا می‌توان هشدار را رد کرد
`variant` `Variant` نوعی از سبک هشدار
`onShow` `() => {}` پس از نشان داده شدن هشدار، تابع فراخوانی می‌شود
`onShown` `() => {}` پس از نشان داده شدن هشدار، تابع فراخوانی می‌شود
`onHide` `() => {}` پیش از مخفی شدن هشدار، تابع فراخوانی می‌شود
`onHidden` `() => {}` پس از مخفی شدن هشدار، تابع فراخوانی می‌شود
هشدار.رد کردندکمه
پراپ نوع شرح
`as` `string` نوع عنصر HTML برای دکمه بستن (معمولاً به صورت "button" یا "a") است.