Callout

Memaklumkan pengguna tentang maklumat penting berkaitan dengan tindakan mereka di dalam Borang. Callout boleh menunjukkan kejayaan, amaran, ralat, atau memberikan maklumat tambahan bergantung pada konteks di dalam borang.

Tajuk

Penerangan untuk menjelaskan kejayaan, amaran, maklumat atau peristiwa ralat

Source Storybook

Penggunaan

Import

import {
  Callout,
  CalloutAction,
  CalloutTitle,
  CalloutContent,
} from "@govtechmy/myds-react/callout";

Anatomi

export default () => (
  <Callout>
    <CalloutTitle />
    <CalloutContent />
    <CalloutAction />
  </Callout>
);

Contoh

Varian

Gunakan prop variant untuk menukar gaya callout!

Tajuk

Penerangan untuk menjelaskan kejayaan, amaran, maklumat atau peristiwa ralat

Tajuk

Penerangan untuk menjelaskan kejayaan, amaran, maklumat atau peristiwa ralat

Tajuk

Penerangan untuk menjelaskan kejayaan, amaran, maklumat atau peristiwa ralat

Tajuk

Penerangan untuk menjelaskan kejayaan, amaran, maklumat atau peristiwa ralat

Boleh Dihapuskan

Jika panggilan keluar boleh dihapuskan, anda boleh memaparkan butang tutup di sudut kanan atas panggilan keluar dengan mengisytiharkan prop dismissible. Untuk menangkap peristiwa hapus, anda boleh menggunakan prop onDismiss.

Untuk menghapuskan callout melalui pendengar acara, balut elemen sasaran dengan CalloutClose. CalloutClose juga akan mencetuskan acara onDismiss, jika ditakrifkan.

Asas - Keadaan Hapus Tidak Terkawal

Anda boleh menangkap peristiwa hapus menggunakan prop onDismiss. Semak konsol untuk peristiwa hapus.

Tindakan - Hapus Callout melalui Prop Render CalloutAction

Anda boleh memanggil peristiwa hapus secara programatik melalui mana-mana pendengar peristiwa di dalam anak CalloutAction

Props

Callout

Prop	Type	Default
`variant`	`enum`	`info`
`dismissible`	`boolean`	-
`onDismiss`	`() => void`	-

MYDS

Callout

Penggunaan

Contoh

Varian

Boleh Dihapuskan

Props

Callout

Di halaman ini