رفتن به محتوای اصلی

پنجرهٔ گفتگو

پنجره‌ای روی صفحه برای کاری کوتاه یا تأیید یک تصمیم، روی dialog بومی مرورگر.

import { Dialog } from "@kashi-ui/react";

نمونه

دعوت به تیم

ایمیل هم‌تیمی را وارد کنید تا دعوت‌نامه برایش ارسال شود.

پروژه حذف شود؟

همهٔ فایل‌ها و تاریخچهٔ این پروژه برای همیشه حذف می‌شوند. این کار قابل بازگشت نیست.

    const [open, setOpen] = useState(false);
    
    <Button onClick={() => setOpen(true)}>دعوت هم‌تیمی</Button>
    <Dialog
    open={open}
    onOpenChange={setOpen}
    title="دعوت به تیم"
    description="ایمیل هم‌تیمی را وارد کنید تا دعوت‌نامه برایش ارسال شود."
    icon={<UserIcon />}
    footer={<>
      <Button variant="secondary" onClick={() => setOpen(false)}>انصراف</Button>
      <Button variant="primary">ارسال دعوت</Button>
    </>}
    >
    <Input label="ایمیل" type="email" autoFocus />
    </Dialog>
    
    // تأیید عملیات مخرب
    <Dialog tone="danger" size="sm" title="پروژه حذف شود؟" … />

    ویژگی‌ها

    نامنوعپیش‌فرضتوضیح
    openboolean—باز بودن (کنترل‌شده)
    onOpenChange(open: boolean) => void—با Esc، دکمهٔ بستن یا کلیک روی پس‌زمینه
    titleReactNode—عنوان — الزامی
    descriptionReactNode—توضیح زیر عنوان
    iconReactNode—آیکون شاخص
    tone"default" | "danger""default"رنگ آیکون برای عملیات مخرب
    size"sm" | "md" | "lg""md"عرض: ۲۴، ۳۰ یا ۴۲ rem
    footerReactNode—دکمه‌ها
    dismissiblebooleantrueبستن با کلیک روی پس‌زمینه
    closeLabelstring"بستن"نام دکمهٔ بستن

    دسترس‌پذیری

    • روی <dialog> بومی با showModal() ساخته شده: فوکوس داخل پنجره می‌ماند، بقیهٔ صفحه برای کیبورد و صفحه‌خوان غیرفعال می‌شود و Esc پنجره را می‌بندد.
    • پس از بستن، فوکوس به دکمه‌ای که پنجره را باز کرده برمی‌گردد.
    • عنوان و توضیح با aria-labelledby و aria-describedby به پنجره متصل‌اند.
    • برای تأیید عملیات مخرب، دکمهٔ «انصراف» را اول بگذارید و نتیجهٔ کار را در توضیح صریح بنویسید.