Dialog
پنجرهٔ مودالی که تمرکز صفحهکلید را داخل خودش قفل میکند؛ برای فرمهای کوتاه یا گرفتن تایید کاربر مناسب است.
این کامپوننت فعلاً برای ۱ فریمورک از ۴ فریمورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
نصب
با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگیها و فایلها خودکار اضافه میشوند.
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/dialog.jsonnpx dig-ui@latest add https://design-system-tau-green.vercel.app/r/dialog.jsonyarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/dialog.jsonbunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/dialog.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
استفاده
import {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogFooter,
} from "@/components/ui/dialog"
<Dialog>
<DialogTrigger asChild>
<Button>باز کردن</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>عنوان</DialogTitle>
<DialogDescription>توضیح</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
ترکیب اجزا
دسترسپذیری
- فوکوس هنگام باز شدن داخل دیالوگ قفل میشود (focus trap) و با بسته شدن، به عنصری که دیالوگ را باز کرده برمیگردد.
- کلید Escape و کلیک روی پسزمینه دیالوگ را میبندند؛ DialogTitle و DialogDescription بهصورت خودکار با aria-labelledby/aria-describedby به محتوا وصل میشوند.
مرجع API
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| open / onOpenChange | boolean / (open: boolean) => void | — | مدیریت کنترلشدهٔ باز و بسته بودن دیالوگ. |
| defaultOpen | boolean | false | باز بودن دیالوگ در بارگذاری اولیه. |
| showCloseButton | boolean | true | نمایش دکمهٔ بستن (×) در گوشهٔ دیالوگ. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
نمونهها
Confirmation
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
در حال ارسال (Loading)
تا وقتی درخواست در راه است، دیالوگ باز میماند، فیلدها و دکمهها قفل میشوند و دکمهٔ بستن هم برداشته میشود. اگر دیالوگ وسط کار بسته شود، کاربر نمیفهمد نتیجه چه شد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
کنش غیرفعال با دلیل (Disabled)
دکمهٔ غیرفعال بدون توضیح، کاربر را سرگردان میکند. هر جا کنش اصلی را غیرفعال میکنید، شرطش را همانجا بنویسید و با aria-describedby به فیلد وصلش کنید.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
کنترلشده (Controlled)
وقتی باز شدن دیالوگ نتیجهٔ یک رویداد است و نه کلیک کاربر — مثل ویرایشگرن یک عملیات یا رسیدن پیام — دیالوگ را بدون DialogTrigger بگذارید و فقط با state کنترلش کنید.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار میآید |
|---|---|
| Confirmation | تأیید یک عملیات مخرب و غیرقابل بازگشت مثل حذف حساب |
| در حال ارسال (Loading) | ارسال دعوتنامه یا ثبت فرمی که چند ثانیه طول میکشد |
| کنش غیرفعال با دلیل (Disabled) | حذف یا هر کار برگشتناپذیری که تایید متنی میخواهد |
| کنترلشده (Controlled) | دیالوگی که با ویرایشگرن یک عملیات باز میشود، نه با کلیک |
دستورالعمل استفاده
یک دیالوگ در هر لحظه، نه دیالوگ تودرتو
انجام بده
برای تایید عملی که از داخل یک دیالوگ شروع میشود، همان دیالوگ را به محتوای تاییدیه تغییر دهید یا اول ببندیدش و بعد دیالوگ تایید را باز کنید؛ کاربر همیشه فقط با یک دیالوگ روبهرو است.
انجام نده
باز کردن یک Dialog تایید از داخل محتوای یک Dialog دیگر که هنوز باز است، دو لایهٔ قفل فوکوس روی هم میسازد و مشخص نیست Escape کدامیک را میبندد.
یک عمل اصلی روشن در فوتر
انجام بده
یک DialogClose برای انصراف (outline) و یک دکمهٔ پررنگ برای عمل اصلی؛ کاربر بدون خواندن دقیق میفهمد کدام دکمه چهکاری میکند.
انجام نده
دو دکمهٔ هموزن (هر دو outline یا هر دو پررنگ) هیچ سرنخی از عمل پیشفرض یا مهمتر نمیدهند.
دیالوگ برای فرم کوتاه یا تایید، نه محتوای بلند
انجام بده
دیالوگ برای یکیدو فیلد یا یک پیام تایید مناسب است؛ محتوا در یک نگاه بدون اسکرول دیده میشود.
انجام نده
چپاندن یک فرم بلند و چندبخشی داخل دیالوگ، کاربر را مجبور به اسکرول داخل یک پنجرهٔ کوچک میکند؛ برای این حالت یک صفحهٔ کامل یا Sheet مناسبتر است.