دیالوگ (Dialog)

معرفی

کامپوننت Dialog برای نمایش محتوا در یک پنجره مودال که روی صفحه اصلی قرار می‌گیرد استفاده می‌شود.

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

• برای عملیات کوتاه که نیاز به تمرکز کاربر دارند (ویرایش پروفایل، افزودن آیتم)
• برای فرم‌های ساده (تا ۵ فیلد) که در context صفحه فعلی معنا دارند
• برای تأیید عملیات غیر مخرب

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

• برای تأیید اعمال destructive — از AlertDialog استفاده کنید
• برای محتوای بزرگ در موبایل — از Drawer استفاده کنید
• برای منوهای کشویی ساده — از DropdownMenu استفاده کنید
• برای فرم‌های بلند (بیش از ۵ فیلد) — از Sheet استفاده کنید

استفاده

زمین بازی

با تغییر تنظیمات زیر، دیالوگ را به صورت زنده مشاهده کنید.

import { Dialog } from '@parto-system-design/ui'

<Dialog />

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  Button,
  Input,
} from '@parto-system-design/ui'
;<Dialog>
  <DialogTrigger asChild>
    <Button>باز کردن دیالوگ</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>ویرایش پروفایل</DialogTitle>
      <DialogDescription>اطلاعات خود را ویرایش کرده و ذخیره کنید.</DialogDescription>
    </DialogHeader>
    <div className="space-y-3">
      <Input placeholder="نام کامل" defaultValue="مریم محمدی" />
      <Input placeholder="ایمیل" type="email" defaultValue="maryam@example.com" />
    </div>
    <DialogFooter>
      <Button variant="outline">لغو</Button>
      <Button>ذخیره</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

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

دیالوگ پایه

ساختار کامپوننت‌ها

<Dialog>
  <DialogTrigger asChild>
    <Button>باز کردن</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>عنوان</DialogTitle>
      <DialogDescription>توضیحات</DialogDescription>
    </DialogHeader>
    {/* محتوا */}
    <DialogFooter>
      <Button>تأیید</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

کنترل Programmatic

const [open, setOpen] = React.useState(false)

;<Dialog open={open} onOpenChange={setOpen}>
  <DialogContent>
    {/* محتوا */}
    <Button onClick={() => setOpen(false)}>بستن</Button>
  </DialogContent>
</Dialog>

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

Dialog از اجزای زیر تشکیل شده است:

• Dialog: کانتینر اصلی و مدیریت state
• DialogTrigger: المنت trigger کننده dialog
• DialogContent: محتوای اصلی dialog
• DialogHeader: هدر dialog
• DialogTitle: عنوان dialog
• DialogDescription: توضیحات dialog
• DialogFooter: فوتر با دکمه‌های عملیاتی

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

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

Dialog

DialogContent

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

• Focus به‌طور خودکار به داخل dialog منتقل می‌شود
• با فشردن Escape بسته می‌شود
• Focus trap برای پیمایش کیبورد
• از role="dialog" و aria-modal استفاده می‌شود
• aria-labelledby برای عنوان
• aria-describedby برای توضیحات

ملاحظات RTL

• محتوا به‌صورت خودکار راست‌چین می‌شود
• دکمه بستن در سمت راست بالا قرار می‌گیرد
• ترتیب دکمه‌ها در DialogFooter از راست به چپ است

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

• AlertDialog — وقتی عمل مخرب است و کاربر باید حتماً تأیید کند (حذف، پاک‌سازی)
• ConfirmDialog — wrapper ساده‌تر برای تأییدهای رایج بدون نیاز به سفارشی‌سازی
• Sheet — وقتی محتوا بلندتر است یا فرم بیش از ۵ فیلد دارد
• Drawer — نسخه موبایل‌پسند که از پایین صفحه باز می‌شود