#ctx.message

Ant Design globale message API, zur Anzeige von temporären Kurzhinweisen in der oberen Mitte der Seite. Nachrichten werden nach einer bestimmten Zeit automatisch geschlossen oder können manuell vom Benutzer geschlossen werden.

#Anwendungsbereiche

#Typdefinition

message: MessageInstance;

MessageInstance ist die Ant Design message-Schnittstelle, die die folgenden Methoden bereitstellt.

#Häufige Methoden

Parameter:

• content (string | ConfigOptions): Nachrichtentext oder Konfigurationsobjekt
• duration (number, optional): Verzögerung für automatisches Schließen (Sekunden), Standard ist 3 Sekunden; der Wert 0 bedeutet kein automatisches Schließen

ConfigOptions (wenn content ein Objekt ist):

interface ConfigOptions {
  content: React.ReactNode;  // Nachrichtentext
  duration?: number;        // Verzögerung für automatisches Schließen (Sekunden)
  onClose?: () => void;    // Callback beim Schließen
  icon?: React.ReactNode;  // Benutzerdefiniertes Symbol
}

#Beispiele

#Grundlegende Verwendung

ctx.message.success('Operation erfolgreich');
ctx.message.error('Operation fehlgeschlagen');
ctx.message.warning('Bitte wählen Sie zuerst Daten aus');
ctx.message.info('Wird verarbeitet...');

#Internationalisierung mit ctx.t

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 und manuelles Schließen

const hide = ctx.message.loading(ctx.t('Saving...'));
// Asynchrone Operation ausführen
await saveData();
hide();  // Ladehinweis manuell schließen
ctx.message.success(ctx.t('Saved'));

#Benutzerdefinierte Konfiguration mit open

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

#Alle Nachrichten schließen

ctx.message.destroy();

#Unterschied zwischen ctx.message und ctx.notification

#Verwandte Themen

• ctx.notification - Benachrichtigungen oben rechts, geeignet für längere Anzeigedauer
• ctx.modal - Modal-Bestätigung, blockierende Interaktion
• ctx.t() - Internationalisierung, wird häufig zusammen mit message verwendet