#ctx.message

API de mensajes globales de Ant Design, utilizada para mostrar avisos temporales ligeros en la parte superior central de la página. Los mensajes se cierran automáticamente después de un tiempo determinado o pueden ser cerrados manualmente por el usuario.

#Escenarios de uso

#Definición de tipos

message: MessageInstance;

MessageInstance es la interfaz de mensaje de Ant Design, que proporciona los siguientes métodos.

#Métodos comunes

Parámetros:

• content (string | ConfigOptions): Contenido del mensaje o objeto de configuración
• duration (number, opcional): Retraso de cierre automático (segundos), por defecto 3 segundos; establezca 0 para no cerrar automáticamente

ConfigOptions (cuando content es un objeto):

interface ConfigOptions {
  content: React.ReactNode;  // Contenido del mensaje
  duration?: number;        // Retraso de cierre automático (segundos)
  onClose?: () => void;    // Función de callback al cerrar
  icon?: React.ReactNode;  // Icono personalizado
}

#Ejemplos

#Uso básico

ctx.message.success('Operación exitosa');
ctx.message.error('Operación fallida');
ctx.message.warning('Por favor, seleccione los datos primero');
ctx.message.info('Procesando...');

#Internacionalización con 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 y cierre manual

const hide = ctx.message.loading(ctx.t('Saving...'));
// Ejecutar operación asíncrona
await saveData();
hide();  // Cerrar manualmente el loading
ctx.message.success(ctx.t('Saved'));

#Uso de open con configuración personalizada

ctx.message.open({
  type: 'success',
  content: 'Aviso de éxito personalizado',
  duration: 5,
  onClose: () => console.log('mensaje cerrado'),
});

#Cerrar todos los mensajes

ctx.message.destroy();

#Diferencia entre ctx.message y ctx.notification

#Relacionado

• ctx.notification - Notificaciones en la esquina superior derecha, adecuadas para tiempos de visualización más largos
• ctx.modal - Confirmación modal, interacción bloqueante
• ctx.t() - Internacionalización, comúnmente utilizada con message