دیالوگ هشدار (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
| Prop | Type | Default | توضیحات |
|---|---|---|---|
open | boolean | - | کنترل وضعیت باز/بسته |
onOpenChange | (open: boolean) => void | - | callback برای تغییر وضعیت |
AlertDialogAction
دکمه عمل اصلی که به صورت خودکار دیالوگ را میبندد.
AlertDialogCancel
دکمه لغو که به صورت خودکار دیالوگ را میبندد.