وایب‌فارسیUI

پنجره

dialogکامپوننت

مودال با عنوان، بدنه و دکمه‌های عمل در جای درست، همراه قفل اسکرول و بازگشت فوکوس.

نصب

  1. با CLI

    اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.

    $ npx vibefarsi add dialog

  2. نصب دستی

    محتوای تب «کد» را در components/ui/dialog.tsx بگذارید.

    $ npm i lucide-react
    کپی کل فایلregistry json

استفاده

usage.tsx
1import { Dialog } from "@/components/ui/dialog"23<Dialog4  open={open}5  onOpenChange={setOpen}6  title="ویرایش آدرس"7  description="آدرس پیش‌فرض ارسال را تغییر دهید."8  footer={<><Button onClick={save}>ذخیره</Button><Button variant="ghost" onClick={() => setOpen(false)}>انصراف</Button></>}9>10  <Input defaultValue="تهران، خیابان ولیعصر…" />11</Dialog>

پراپ‌ها

پراپنوعپیش‌فرضتوضیح
open / onOpenChangeboolean / (o) => void-کنترل باز و بسته.
title / descriptionReactNode-با aria-labelledby و aria-describedby وصل میشن.
footerReactNode-دکمه‌ها، که دکمه‌ی اصلی اول می‌آد.
role"dialog" | "alertdialog""dialog"alertdialog با کلیک بیرون بسته نمیشه.
قبلیپالت دستوربعدیتأیید عمل