Dialog Amaran

Pop-up modal yang direka untuk menarik perhatian pengguna untuk tindakan atau mesej penting. Ia terdiri daripada tiga komponen utama, iaitu Header, Content, dan Footer. Elemen-elemen ini bersama-sama membentuk struktur dialog yang fleksibel dan padu yang boleh menampung pelbagai jenis amaran atau borang.

Source Storybook

Penggunaan

Import

import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogTitle,
  AlertDialogTrigger,
  AlertDialogAction,
  AlertDialogClose,
} from "@govtechmy/myds-react/alert-dialog";

Anatomi

export default () => (
  <AlertDialog>
    <AlertDialogTrigger />
    <AlertDialogBody>
      <AlertDialogHeader>
        <AlertDialogTitle />
      </AlertDialogHeader>
      <AlertDialogContent>
        <AlertDialogDescription />
      </AlertDialogContent>
      <AlertDialogFooter>
        <AlertDialogClose />
      </AlertDialogFooter>
    </AlertDialogBody>
  </AlertDialog>
);

Contoh

Variasi

Gunakan prop variant untuk menetapkan tema dialog amaran. Variasi lalai adalah default. Variasi yang tersedia adalah info, success, warning, dan danger.

Pencetus

Gunakan AlertDialogTrigger untuk membungkus elemen pencetus yang membuka dialog. Contoh di bawah menunjukkan tiga (3) butang yang membuka dialog amaran yang sama.

Keadaan Tidak Terkawal vs Terkawal

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

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

Tidak Terkawal

Terkawal

Boleh Dismiss

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

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

Penjajaran

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

Mula

Penuh

Akhir

Prop	Type	Default
`open`	`boolean`	`false`
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`(open: boolean) => void`	-

AlertDialogContent

Prop	Type	Default
`dismissible`	`boolean`	`true`
`onDismiss`	`() => void`	-

AlertDialogAction

Prop	Type	Default
`align`	`start \| end \| full`	`end`
`action`	`ReactNode`	-

MYDS