دیالوگ هشدار (AlertDialog)

معرفی

کامپوننت Alert Dialog برای نمایش پیام‌های مهم و دریافت تایید از کاربر استفاده می‌شود. این دیالوگ تمرکز کاربر را به خود جلب می‌کند و تا زمانی که کاربر پاسخ ندهد، بسته نمی‌شود.

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

• برای تأیید اعمال مخرب و غیرقابل بازگشت (حذف حساب، پاک‌سازی داده‌ها)
• وقتی کاربر باید حتماً تصمیم بگیرد و نباید بتواند بدون پاسخ دادن ادامه دهد
• برای هشدارهای بحرانی که نیاز به توجه فوری دارند

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

• برای محتوای غیر destructive — از Dialog استفاده کنید
• برای تأییدهای ساده بدون نیاز به سفارشی‌سازی — از ConfirmDialog استفاده کنید
• برای اعلان‌های گذرا — از Sonner استفاده کنید

زمین بازی

با تغییر تنظیمات زیر، پیش‌نمایش زنده را مشاهده کنید.

import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button } from '@partodata/ui'

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button type="danger" size="sm">حذف حساب</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>آیا مطمئن هستید؟</AlertDialogTitle>
      <AlertDialogDescription>این عملیات بازگشت‌پذیر نیست.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>انصراف</AlertDialogCancel>
      <AlertDialogAction>حذف</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

استفاده

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@partodata/ui'

export default function MyComponent() {
  return (
    <AlertDialog>
      <AlertDialogTrigger>باز کردن</AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>آیا کاملا مطمئن هستید؟</AlertDialogTitle>
          <AlertDialogDescription>
            این عمل قابل بازگشت نیست. این کار حساب شما را به طور دائم حذف کرده و داده‌های شما را از سرورهای ما پاک
            می‌کند.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>لغو</AlertDialogCancel>
          <AlertDialogAction>ادامه</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

حالت‌ها و انواع

• تأیید حذف داده‌ها — وقتی کاربر می‌خواهد رکوردی را به‌طور دائم حذف کند
• هشدار قبل از اقدامات مهم — مثلاً خروج از حساب یا تغییر تنظیمات حساس
• نمایش پیام‌های بحرانی — خطاهایی که نیاز به تصمیم فوری دارند
• دریافت تأیید کاربر — قبل از ارسال داده‌های حساس

حالت بخش‌بندی‌شده (sectioned)

با sectioned روی AlertDialogContent، سربرگ و فوتر خط‌دار می‌شوند و محتوای اصلی در یک AlertDialogSection padded قرار می‌گیرد.

<AlertDialogContent sectioned>
  <AlertDialogHeader>
    <AlertDialogTitle>حذف کمپین؟</AlertDialogTitle>
  </AlertDialogHeader>
  <AlertDialogSection>این اقدام برگشت‌ناپذیر است و همهٔ داده‌های کمپین حذف می‌شود.</AlertDialogSection>
  <AlertDialogFooter>
    <AlertDialogCancel>لغو</AlertDialogCancel>
    <AlertDialogAction>حذف</AlertDialogAction>
  </AlertDialogFooter>
</AlertDialogContent>

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

دسترسی‌پذیری

• دیالوگ مودال با overlay — اسکرول صفحه قفل می‌شود
• مدیریت فوکوس خودکار (focus trap)
• با کلید Escape بسته نمی‌شود (الزام تصمیم‌گیری)
• از role="alertdialog" و aria-modal استفاده می‌شود
• aria-labelledby و aria-describedby برای خوانایی screen readers

جدول ویژگی‌ها

AlertDialog

AlertDialogContent

AlertDialogSection

بلوک بدنهٔ padded برای آناتومی بخش‌بندی‌شده؛ بین AlertDialogHeader و AlertDialogFooter قرار می‌گیرد و فقط داخل یک AlertDialogContent با sectioned معنا دارد.

AlertDialogAction

دکمه عمل اصلی که به صورت خودکار دیالوگ را می‌بندد.

AlertDialogCancel

دکمه لغو که به صورت خودکار دیالوگ را می‌بندد.

کامپوننت‌های مرتبط

• Dialog — برای محتوای غیر destructive
• ConfirmDialog — wrapper ساده‌تر برای تأیید
• راهنمای انتخاب کامپوننت — مقایسه همه overlay ها