• Bahasa Indonesia

      • ctx.message

      API global message Ant Design, untuk menampilkan tip ringan sementara di tengah atas halaman. Pesan akan otomatis tertutup setelah waktu tertentu, atau dapat ditutup manual oleh pengguna.

      Skenario Penggunaan

      SkenarioDeskripsi
      JSBlock / JSField / JSItem / JSColumnFeedback operasi, tip validasi, copy berhasil, dan tip ringan lainnya
      Action Form / Event FlowSubmit berhasil, save gagal, validasi tidak lulus, dan feedback lainnya
      Action Event (JSAction)Klik, batch operation selesai, dan feedback instan lainnya

      Definisi Tipe

      message: MessageInstance;

      MessageInstance adalah interface message Ant Design, menyediakan method berikut.

      Method Umum

      MethodDeskripsi
      success(content, duration?)Menampilkan tip sukses
      error(content, duration?)Menampilkan tip error
      warning(content, duration?)Menampilkan tip peringatan
      info(content, duration?)Menampilkan tip informasi
      loading(content, duration?)Menampilkan tip loading (perlu ditutup manual)
      open(config)Membuka pesan dengan konfigurasi kustom
      destroy()Menutup semua pesan yang ditampilkan

      Parameter:

      • content (string | ConfigOptions): konten pesan atau objek konfigurasi
      • duration (number, opsional): delay penutupan otomatis (detik), default 3 detik; setel ke 0 berarti tidak otomatis tutup

      ConfigOptions (saat content adalah objek):

      interface ConfigOptions {
  content: React.ReactNode;  // Konten pesan
  duration?: number;        // Delay penutupan otomatis (detik)
  onClose?: () => void;    // Callback penutupan
  icon?: React.ReactNode;  // Ikon kustom
}

      Contoh

      Penggunaan Dasar

      ctx.message.success('Operasi berhasil');
ctx.message.error('Operasi gagal');
ctx.message.warning('Silakan pilih data terlebih dahulu');
ctx.message.info('Sedang memproses...');

      Bersama dengan ctx.t untuk Internasionalisasi

      ctx.message.success(ctx.t('Copied'));
ctx.message.warning(ctx.t('Please select at least one row'));
ctx.message.success(ctx.t('Exported {{count}} records', { count: rows.length }));

      loading dan Tutup Manual

      const hide = ctx.message.loading(ctx.t('Saving...'));
// Eksekusi operasi async
await saveData();
hide();  // Tutup loading manual
ctx.message.success(ctx.t('Saved'));

      Menggunakan open dengan Konfigurasi Kustom

      ctx.message.open({
  type: 'success',
  content: 'Tip sukses kustom',
  duration: 5,
  onClose: () => console.log('message closed'),
});

      Tutup Semua Pesan

      ctx.message.destroy();

      Perbedaan dengan ctx.notification

      Karakteristikctx.messagectx.notification
      PosisiTengah atas halamanKanan atas
      KegunaanTip ringan sementara, otomatis hilangPanel notifikasi, dapat dengan judul dan deskripsi, cocok untuk tampilan waktu yang lebih lama
      Skenario KhasFeedback operasi, tip validasi, copy berhasilNotifikasi task selesai, pesan sistem, konten yang lebih panjang yang perlu mendapat perhatian pengguna

      Terkait

      • ctx.notification - Notifikasi kanan atas, cocok untuk tampilan waktu yang lebih lama
      • ctx.modal - Konfirmasi popup, interaksi blocking
      • ctx.t() - Internasionalisasi, sering digunakan dengan message