پرتوپرتو

دیالوگ هشدار (Alert Dialog)

یک دیالوگ مودال که کاربر را با محتوای مهم قطع می‌کند و منتظر پاسخ می‌ماند

معرفی

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

استفاده

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

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

ویژگی‌ها

  • دیالوگ مودال با overlay
  • قفل کردن اسکرول صفحه
  • مدیریت فوکوس خودکار
  • بستن با کلید Escape
  • پشتیبانی کامل از دسترسی‌پذیری
  • سازگار با RTL

کاربردها

  • تایید حذف داده‌ها
  • هشدار قبل از اقدامات مهم
  • نمایش پیام‌های بحرانی
  • دریافت تایید کاربر

Props

AlertDialog

PropTypeDefaultتوضیحات
openboolean-کنترل وضعیت باز/بسته
onOpenChange(open: boolean) => void-callback برای تغییر وضعیت

AlertDialogAction

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

AlertDialogCancel

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