Message

Messages de retour légers affichés en haut au centre de l’écran.

Import

import { message } from 'asterui'

Exemples

Messages de base

Messages de retour légers pour les actions de l'utilisateur.

</>

SuccessErrorInfoWarning

import { message, Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="sm" wrap>
        <Button
          color="primary"
          onClick={() => message.success('Changes saved successfully')}
        >
          Success
        </Button>
  
        <Button
          onClick={() => message.error('Failed to save changes')}
        >
          Error
        </Button>
  
        <Button
          onClick={() => message.info('New updates available')}
        >
          Info
        </Button>
  
        <Button
          onClick={() => message.warning('Session expires in 5 minutes')}
        >
          Warning
        </Button>
      </Space>
    )
}

export default App

Message de chargement

Afficher un message de chargement qui peut être fermé de manière programmatique.

</>

Submit

import { message, Button } from 'asterui'
import { useState } from 'react'

function App() {
  const [loadingId, setLoadingId] = useState<string | null>(null);
  
  const handleClick = () => {
    const id = message.loading('Processing...');
    setLoadingId(id);
  
    setTimeout(() => {
      message.destroy(id);
      message.success('Done!');
      setLoadingId(null);
    }, 2000);
  };
  
  return (
      <Button onClick={handleClick} disabled={!!loadingId}>
        {loadingId ? 'Processing...' : 'Submit'}
      </Button>
    )
}

export default App

Durée personnalisée

Contrôler la durée d'affichage des messages.

</>

1 secondDefault (3s)6 seconds

import { message, Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="sm" wrap>
        <Button
          onClick={() => message.info('Quick message', { duration: 1 })}
        >
          1 second
        </Button>
  
        <Button
          color="primary"
          onClick={() => message.info('Default duration')}
        >
          Default (3s)
        </Button>
  
        <Button
          onClick={() => message.info('Longer message', { duration: 6 })}
        >
          6 seconds
        </Button>
      </Space>
    )
}

export default App

Empilement de messages

Plusieurs messages s'empilent en haut au centre de l'écran.

</>

Show Multiple

import { message, Button } from 'asterui'

function App() {
  return (
      <Button
        color="primary"
        onClick={() => {
          message.success('First message');
          setTimeout(() => message.info('Second message'), 300);
          setTimeout(() => message.warning('Third message'), 600);
        }}
      >
        Show Multiple
      </Button>
    )
}

export default App

API

Options du message

Propriété	Description	Type	Défaut
content	Texte du message (premier argument)	React.ReactNode	-
duration	Durée de fermeture automatique en secondes	number	3
key	Identifiant unique. La mise à jour avec la même clé met à jour le message existant	string	-
icon	Icône personnalisée à afficher	React.ReactNode	-
className	Classe CSS supplémentaire	string	-
style	Styles en ligne	React.CSSProperties	-
data-testid	ID de test pour les frameworks de test	string	-
onClick	Rappel lorsque le message est cliqué	() => void	-
onClose	Rappel lorsque le message est fermé	() => void	-

Accessibilité

• Les messages sont annoncés aux lecteurs d’écran via des régions actives
• Les icônes fournissent des indices visuels en plus de la couleur pour le type de message
• Les messages se ferment automatiquement mais peuvent être configurés pour persister