คอมโพเนนต์ทั้งหมด
Dialog
หน้าต่างโมดอลจาก <dialog> ดักโฟกัสและปิดด้วย Esc
ui/overlay.tsxClient componentใช้งาน
สร้างจาก <dialog> และ showModal() เบราว์เซอร์จัดการโฟกัส ปุ่ม Esc พื้นหลังที่กดไม่ได้ และการคืนโฟกัสให้ปุ่มเปิด
<Dialog
title="แก้ไขโปรไฟล์"
description="ชื่อนี้จะแสดงบนใบประกาศนียบัตรของคุณ"
trigger={<Button variant="primary">แก้ไขโปรไฟล์</Button>}
dismissible={false}
footer={close => (
<>
<Button variant="ghost" onClick={close}>ยกเลิก</Button>
<Button variant="primary" onClick={save}>บันทึก</Button>
</>
)}
>
<Field label="ชื่อที่แสดง"><Input /></Field>
</Dialog>Props
| Prop | Type | Default | คำอธิบาย |
|---|---|---|---|
title | ReactNode | - | บังคับ ประกาศเมื่อเปิด |
description | ReactNode | - | บรรทัดอธิบายใต้หัวข้อ |
trigger | ReactElement | - | ปุ่มที่เปิด รับ onClick และ aria-expanded |
open / onOpenChange | boolean / (open) => void | - | ควบคุมจากภายนอก |
footer | ReactNode | (close) => ReactNode | - | แถวปุ่มด้านล่าง |
size | "sm" | "md" | "lg" | "md" | กว้าง 420 / 560 / 760 px |
dismissible | boolean | true | ปิดเมื่อกดพื้นหลัง ตั้งเป็น false สำหรับฟอร์มที่อาจเสียข้อมูล ปุ่ม Esc ปิดได้เสมอ |
การเข้าถึง
- โฟกัสถูกขังในหน้าต่างและกลับไปที่ปุ่มเปิดเมื่อปิด
- หัวข้อผูกด้วย aria-labelledby คำอธิบายด้วย aria-describedby
- ปุ่มปิดมีชื่อ ปิดหน้าต่าง
ใช้เมื่อไร
ควรทำ
- ใช้เมื่อต้องหยุดผู้ใช้ก่อนทำต่อ เช่น ยืนยันการลบ
- ปุ่มยืนยันบอกผลลัพธ์ เช่น ลบถาวร ไม่ใช่ ตกลง
ไม่ควรทำ
- ซ้อน Dialog ใน Dialog
- ใส่เนื้อหายาวที่ต้องเลื่อนมาก ใช้ Sheet หรือหน้าใหม่