Dialog

Penggunaan

import { Dialog } from "@govtechmy/myds-react/dialog";

export default () => (
  <Dialog>
    <DialogTrigger />
    <DialogBody>
      <DialogHeader>
        <DialogTitle />
      </DialogHeader>
      <DialogContent>
        <DialogDescription />
      </DialogContent>
      <DialogFooter>
        <DialogClose />
      </DialogFooter>
    </DialogBody>
  </Dialog>
);

Contoh

Pencetus

Gunakan DialogTrigger untuk membungkus elemen pencetus yang membuka dialog. Contoh di bawah menunjukkan tiga butang yang berbeza membuka dialog yang sama.

Keadaan Tidak Terkawal vs Terkawal

Untuk menggunakan dialog dalam keadaan tidak terkawal, tetapkan prop defaultOpen kepada keadaan awal dialog.

Untuk menggunakan dialog dalam keadaan terkawal, gunakan prop open dan onOpenChange untuk mengendalikan keadaan secara programatik.

Boleh Ditutup

Untuk menghalang pengguna daripada menutup dialog, tetapkan prop dismissible kepada false pada DialogBody. Secara lalai, dialog boleh ditutup.

Anda boleh melampirkan fungsi panggilan balik kepada prop onDismiss untuk mengendalikan acara penutupan.

Sempadan

Sempadan boleh ditambah pada DialogHeader dan DialogFooter dengan menetapkan prop border kepada true.

Penjajaran

Anda boleh menetapkan align pada DialogFooter untuk menjajarkan anak kepada start, end, atau full lebar dialog. Secara lalai, penjajaran ditetapkan kepada end.

Tindakan

Anda boleh menambah tindakan khas pada dialog dengan menggunakan prop action pada DialogFooter.

Props

Dialog

DialogBody

DialogHeader

DialogFooter