تم تاریک

هشدار Alert ​

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

نمونه زنده ​

infoSelect option
با توضیحاتSelect option
راهنما
برای جزئیات بیشتر، مستندات این بخش را مطالعه کنید.

آناتومی ​

با هاور روی شماره‌های روی Alert (یا آیتم‌های لیست کنار آن)، هر بخش برجسته می‌شود.

هشدار
کامپوننتی انعطاف‌پذیر برای اطلاع‌رسانی پیام‌های مهم به کاربر.
  1. 1Icon
  2. 2Title
  3. 3Description
  1. آیکون (Icon): نمایش‌دهنده نوع و فوریت پیام؛ در راستای RTL در سمت راست Alert قرار می‌گیرد.
  2. تیتر (Title): عنوان کوتاهی که ماهیت پیام را مشخص می‌کند.
  3. توضیحات (Description): شرح تکمیلی مشکل، راه‌حل یا جزییات رویداد؛ اختیاری است.

ساختار ​

Alert از آیکون وضعیت و بلوک محتوا (تیتر و توضیحات اختیاری) تشکیل شده است. عرض کامپوننت برابر با عرض ظرف والد است و فاصله‌گذاری داخلی در همه ورینت‌ها یکسان می‌ماند.

با هاور روی بخش‌های Alert (یا روی آیتم‌های لیست زیر آن)، اندازه‌ی مرتبط با هر بخش نمایش داده می‌شود.

هشدار
کامپوننتی انعطاف‌پذیر برای اطلاع‌رسانی پیام‌های مهم به کاربر.
  1. 24pxIcon Size
  2. 24pxTitle Line Height
  3. 20pxDescription Line Height
  4. 8pxIcon to Content Gap
  5. 4pxTitle to Description Gap
  6. 24pxHorizontal Padding
  7. 16pxVertical Padding
  8. 8pxCorner Radius
  9. AllAll Sizes
اندازهمقدار
آیکون24px
ارتفاع خط تیتر24px
ارتفاع خط توضیحات20px
فاصله آیکون تا محتوا8px
فاصله تیتر تا توضیحات4px
پدینگ افقی24px
پدینگ عمودی16px
شعاع گوشه8px

انواع و ورینت‌ها Variants ​

هشدار
کامپوننتی انعطاف‌پذیر برای اطلاع‌رسانی پیام‌های مهم به کاربر.
هشدار
کامپوننتی انعطاف‌پذیر برای اطلاع‌رسانی پیام‌های مهم به کاربر.
هشدار
کامپوننتی انعطاف‌پذیر برای اطلاع‌رسانی پیام‌های مهم به کاربر.
هشدار
کامپوننتی انعطاف‌پذیر برای اطلاع‌رسانی پیام‌های مهم به کاربر.
هشدار
کامپوننتی انعطاف‌پذیر برای اطلاع‌رسانی پیام‌های مهم به کاربر.

این کامپوننت در ۵ حالت رنگی برای انتقال کانتکس‌های مختلف ارایه می‌شود:

نوع (Type)رنگ شاخصکاربرد
Successسبزتایید انجام موفقیت‌آمیز یک فرآیند در بدنه صفحه.
Dangerقرمزاعلام خطا در پیکربندی یا توقف یک فرآیند بحرانی.
Warningنارنجیهشدار درباره عواقب یک تصمیم (مثل غیرقابل ویرایش بودن).
Infoآبیارایه اطلاعات تکمیلی یا نکات آموزشی مرتبط با بخش.
Defaultخاکستریاعلان‌های عمومی یا پیام‌هایی با حساسیت پایین.

موارد استفاده ​

چه زمانی استفاده کنیم؟ ​

  • اطلاعات کانتکس‌محور: وقتی نیاز است پیامی در بالای یک جدول یا فرم خاص نمایش داده شود.
  • هشدارهای ماندگار: وقتی کاربر باید تا پایان یک فرآیند از یک محدودیت آگاه باشد (مثال: ویرایش منطقه بعد از ساخت امکان‌پذیر نیست)

تفاوت با Toast ​

  • Alert: بخشی از محتواست، فضای صفحه را اشغال می‌کند و به‌شکل خودکار ناپدید نمی‌شود.
  • Toast: روی محتوا شناور است، فضای ثابت اشغال نمی‌کند و پس از چند ثانیه محو می‌شود.

راهنمای استفاده ​

بایدها (Do's) ​

  • محل قرارگیری: هشدار را در نزدیک‌‌ترین مکان به بخش مرتبط قرار دهید (در بالاترین بخش یک Section).
  • وضوح پیام: تیتر باید گویا باشد. از به کار بردن جملات مبهم خودداری کنید.
  • ترازبندی: طبق استاندارد سرخآب، آیکون و متن باید راست‌چین (RTL) باشند.

نبایدها (Don'ts) ​

  • صفحه را با چندین Alert همزمان شلوغ نکنید، این کار باعث نادیده گرفتن پیام‌ها توسط کاربر می‌شود.
  • از Alert برای پیام‌های موفقیت‌آمیز گذرا (مثل کپی شد) استفاده نکنید، برای این موارد Toast اولویت دارد.
  • متن هشدار را بیش از حد طولانی نکنید، اگر نیاز به داک مفصل است، از لینک مشاهده مستندات استفاده کنید.

رفتار و تعامل ​

  • انعطاف‌پذیری: عرض Alert تابع ظرف والد خود (مثال عرض یکsection ) است.
  • چیدمان در موبایل: در سایزهای کوچک، آیکون و تیتر در یک خط باقی مانده و متن توضیحات به زیر آن‌ها منتقل می‌شود تا خوانایی حفظ شود.