#ctx.message

API globale de message d'Ant Design, utilisée pour afficher des messages temporaires légers au centre en haut de la page. Les messages se ferment automatiquement après un certain temps ou peuvent être fermés manuellement par l'utilisateur.

#Scénarios d'utilisation

#Définition du type

message: MessageInstance;

MessageInstance est l'interface de message d'Ant Design, fournissant les méthodes suivantes.

#Méthodes courantes

Paramètres :

• content (string | ConfigOptions) : Contenu du message ou objet de configuration
• duration (number, facultatif) : Délai de fermeture automatique (secondes), par défaut 3 secondes ; réglez sur 0 pour ne pas fermer automatiquement

ConfigOptions (lorsque content est un objet) :

interface ConfigOptions {
  content: React.ReactNode;  // Contenu du message
  duration?: number;        // Délai de fermeture automatique (secondes)
  onClose?: () => void;    // Rappel lors de la fermeture
  icon?: React.ReactNode;  // Icône personnalisée
}

#Exemples

#Utilisation de base

ctx.message.success('Opération réussie');
ctx.message.error('Opération échouée');
ctx.message.warning('Veuillez d\'abord sélectionner des données');
ctx.message.info('Traitement en cours...');

#Internationalisation avec 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 }));

#Chargement et fermeture manuelle

const hide = ctx.message.loading(ctx.t('Saving...'));
// Exécuter une opération asynchrone
await saveData();
hide();  // Fermer manuellement le chargement
ctx.message.success(ctx.t('Saved'));

#Utilisation de open avec une configuration personnalisée

ctx.message.open({
  type: 'success',
  content: 'Invite de succès personnalisée',
  duration: 5,
  onClose: () => console.log('message fermé'),
});

#Fermer tous les messages

ctx.message.destroy();

#Différence entre ctx.message et ctx.notification

#Articles connexes

• ctx.notification - Notifications en haut à droite, adaptées aux durées d'affichage plus longues
• ctx.modal - Fenêtre modale de confirmation, interaction bloquante
• ctx.t() - Internationalisation, couramment utilisée avec message