คอมโพเนนต์ทั้งหมด

Dialog

หน้าต่างโมดอลจาก <dialog> ดักโฟกัสและปิดด้วย Esc

ui/overlay.tsxClient component

ใช้งาน

สร้างจาก <dialog> และ showModal() เบราว์เซอร์จัดการโฟกัส ปุ่ม Esc พื้นหลังที่กดไม่ได้ และการคืนโฟกัสให้ปุ่มเปิด

แก้ไขโปรไฟล์

ชื่อนี้จะแสดงบนใบประกาศนียบัตรของคุณ

ใช้สำหรับเข้าสู่ระบบเท่านั้น

ลบคอร์สนี้ถาวร?

ผู้เรียน 23 คนจะเข้าถึงบทเรียนไม่ได้อีก และย้อนกลับไม่ได้

tsx
<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

PropTypeDefaultคำอธิบาย
titleReactNode-บังคับ ประกาศเมื่อเปิด
descriptionReactNode-บรรทัดอธิบายใต้หัวข้อ
triggerReactElement-ปุ่มที่เปิด รับ onClick และ aria-expanded
open / onOpenChangeboolean / (open) => void-ควบคุมจากภายนอก
footerReactNode | (close) => ReactNode-แถวปุ่มด้านล่าง
size"sm" | "md" | "lg""md"กว้าง 420 / 560 / 760 px
dismissiblebooleantrueปิดเมื่อกดพื้นหลัง ตั้งเป็น false สำหรับฟอร์มที่อาจเสียข้อมูล ปุ่ม Esc ปิดได้เสมอ

การเข้าถึง

  • โฟกัสถูกขังในหน้าต่างและกลับไปที่ปุ่มเปิดเมื่อปิด
  • หัวข้อผูกด้วย aria-labelledby คำอธิบายด้วย aria-describedby
  • ปุ่มปิดมีชื่อ ปิดหน้าต่าง

ใช้เมื่อไร

ควรทำ

  • ใช้เมื่อต้องหยุดผู้ใช้ก่อนทำต่อ เช่น ยืนยันการลบ
  • ปุ่มยืนยันบอกผลลัพธ์ เช่น ลบถาวร ไม่ใช่ ตกลง

ไม่ควรทำ

  • ซ้อน Dialog ใน Dialog
  • ใส่เนื้อหายาวที่ต้องเลื่อนมาก ใช้ Sheet หรือหน้าใหม่