هشدار (Alert)
کامپوننت نمایش پیامهای هشدار و اطلاعات مهم
معرفی
کامپوننت Alert برای نمایش پیامهای مهم، اطلاعات یا هشدارها به کاربران استفاده میشود.
چه زمانی استفاده کنیم:
- برای نمایش پیامهای دائمی (خطا، موفقیت، هشدار، اطلاعات) که باید تا زمان رفع مشکل باقی بمانند
- برای اطلاعرسانیهای مهم که کاربر نباید آنها را از دست بدهد
- برای نمایش نتایج عملیاتی (موفقیت/شکست) در سطح فرم یا بخش
چه زمانی استفاده نکنیم:
- برای پیامهای گذرا که بعد از چند ثانیه ناپدید میشوند — از
Sonner(toast) استفاده کنید - برای خطاهای سطح صفحه که عملکرد را مسدود میکنند — از
ErrorStateاستفاده کنید - برای اعلانهای داخل کامپوننت مستندات — از
Calloutاستفاده کنید
استفاده
پیشفرض
این یک پیام اطلاعرسانی است.
اطلاعات
این یک پیام اطلاعاتی است.
موفقیت
عملیات با موفقیت انجام شد.
هشدار
لطفاً این مورد را بررسی کنید.
خطا
مشکلی پیش آمده است.
import { Alert, AlertDescription, AlertTitle } from '@parto-system-design/ui'
;<div className="space-y-4">
<Alert>
<AlertTitle>اطلاعیه</AlertTitle>
<AlertDescription>این یک پیام اطلاعاتی برای کاربر است.</AlertDescription>
</Alert>
<Alert variant="destructive">
<AlertTitle>خطا</AlertTitle>
<AlertDescription>مشکلی در ذخیرهسازی اطلاعات بهوجود آمد.</AlertDescription>
</Alert>
</div>زمین بازی
با تغییر تنظیمات زیر، هشدار را به صورت زنده مشاهده کنید.
زمین بازی
عنوان هشدار
این یک پیام هشدار برای کاربر است.
تنظیمات
import { Alert } from '@parto-system-design/ui'
<Alert />انواع
پیشفرض
<Alert>
<AlertTitle>اطلاعات</AlertTitle>
<AlertDescription>این یک پیام اطلاعاتی است.</AlertDescription>
</Alert>اطلاعات (Info)
<Alert variant="info">
<AlertTitle>اطلاعات</AlertTitle>
<AlertDescription>این یک پیام اطلاعاتی است.</AlertDescription>
</Alert>موفقیت (Success)
<Alert variant="success">
<AlertTitle>موفقیت</AlertTitle>
<AlertDescription>عملیات با موفقیت انجام شد.</AlertDescription>
</Alert>هشدار (Warning)
<Alert variant="warning">
<AlertTitle>هشدار</AlertTitle>
<AlertDescription>لطفاً این مورد را بررسی کنید.</AlertDescription>
</Alert>خطا (Destructive)
<Alert variant="destructive">
<AlertTitle>خطا</AlertTitle>
<AlertDescription>یک خطای مهم رخ داده است.</AlertDescription>
</Alert>با آیکون
import { Icons } from '@parto-system-design/ui'
;<Alert>
<Icons.info className="h-4 w-4" />
<AlertTitle>اطلاعات</AlertTitle>
<AlertDescription>پیام با آیکون اطلاعات</AlertDescription>
</Alert>ترکیب کامپوننتها
Alert از سه جزء اصلی تشکیل شده است:
- Alert: کانتینر اصلی
- AlertTitle: عنوان پیام
- AlertDescription: متن توضیحات
راهنمای استفاده
بکنید
- از variant مناسب (
info،success،warning،destructive) متناسب با نوع پیام استفاده کنید - همیشهAlertTitleوAlertDescriptionرا با هم استفاده کنید تا پیام واضح باشد - برای خطاهای فرم، Alert را بالای فرم قرار دهید تا کاربر فوراً متوجه شود
نکنید
- از Alert برای پیامهای گذرا (toast) استفاده نکنید — از
Sonnerاستفاده کنید - بیش از دو Alert همزمان در یک صفحه نمایش ندهید — اولویتبندی کنید - از variantdestructiveبرای پیامهای اطلاعاتی استفاده نکنید
جدول ویژگیها
دسترسیپذیری
- از نقش
alertیاstatusمناسب استفاده میشود - پیامهای مهم به screen readers اعلام میشوند
- رنگبندی مناسب برای تمایز انواع پیام
ملاحظات RTL
- متن بهصورت خودکار راستچین میشود
- آیکونها در سمت راست قرار میگیرند
- فاصلهگذاری با استفاده از Logical Properties
کامپوننتهای مرتبط
- AlertDialog — وقتی کاربر باید تأیید کند
- Sonner — برای اعلانهای گذرا
- ErrorState — برای خطاهای سطح صفحه