روکشModal Dialog

دیالوگ

پنجره مودال برای نمایش محتوای مهم

پیش‌فرض

دیالوگ ساده

<Dialog>
  <DialogTrigger asChild>
    <Button>باز کردن دیالوگ</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>عنوان</DialogTitle>
      <DialogDescription>
        محل قرارگیری محتوا که می‌تواند با کامپوننت جایگزین شود.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

نصب دستی

وابستگی‌ها

برای استفاده از Modal Dialog، باید این بسته‌ها را نصب کنید:

npm install @radix-ui/react-dialog

کد زیر را می‌توانید در پروژه خود کپی کنید تا Modal Dialog را به صورت دستی اضافه کنید:

نمونه‌های بیشتر

با فرم

دیالوگ همراه با فرم ورودی

قابل اسکرول

دیالوگ با محتوای طولانی