Notification

Afficher des messages de notification globaux dans les coins de l’écran.

Import

import { notification } from 'asterui'

Exemples

Notifications de base

Différents types de notifications avec messages simples.

</>

SuccessErrorInfoWarning

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

function App() {
  return (
      <Space direction="horizontal" size="sm" wrap>
        <Button
          color="primary"
          onClick={() =>
            notification.success({
              message: 'Success',
              description: 'Your changes have been saved successfully.',
            })
          }
        >
          Success
        </Button>
  
        <Button
          onClick={() =>
            notification.error({
              message: 'Error',
              description: 'Failed to save changes. Please try again.',
            })
          }
        >
          Error
        </Button>
  
        <Button
          onClick={() =>
            notification.info({
              message: 'Information',
              description: 'This is an informational message.',
            })
          }
        >
          Info
        </Button>
  
        <Button
          onClick={() =>
            notification.warning({
              message: 'Warning',
              description: 'Your session will expire in 5 minutes.',
            })
          }
        >
          Warning
        </Button>
      </Space>
    )
}

export default App

Placement

Afficher les notifications dans différentes positions de coin.

</>

Top LeftTop RightBottom LeftBottom Right

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

function App() {
  return (
      <Space direction="horizontal" size="sm" wrap>
        <Button
          onClick={() =>
            notification.success({
              message: 'Top Left',
              description: 'Notification from top left corner.',
              placement: 'topLeft',
            })
          }
        >
          Top Left
        </Button>
  
        <Button
          onClick={() =>
            notification.success({
              message: 'Top Right',
              description: 'Notification from top right corner.',
              placement: 'topRight',
            })
          }
        >
          Top Right
        </Button>
  
        <Button
          onClick={() =>
            notification.success({
              message: 'Bottom Left',
              description: 'Notification from bottom left corner.',
              placement: 'bottomLeft',
            })
          }
        >
          Bottom Left
        </Button>
  
        <Button
          onClick={() =>
            notification.success({
              message: 'Bottom Right',
              description: 'Notification from bottom right corner.',
              placement: 'bottomRight',
            })
          }
        >
          Bottom Right
        </Button>
      </Space>
    )
}

export default App

Durée personnalisée

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

</>

2 secondsDefault (4.5s)10 secondsNo Auto-close

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

function App() {
  return (
      <Space direction="horizontal" size="sm" wrap>
        <Button
          onClick={() =>
            notification.info({
              message: 'Quick Message',
              description: 'This will close in 2 seconds.',
              duration: 2,
            })
          }
        >
          2 seconds
        </Button>
  
        <Button
          color="primary"
          onClick={() =>
            notification.info({
              message: 'Standard Message',
              description: 'This uses the default duration (4.5s).',
            })
          }
        >
          Default (4.5s)
        </Button>
  
        <Button
          onClick={() =>
            notification.info({
              message: 'Long Message',
              description: 'This will stay visible for 10 seconds.',
              duration: 10,
            })
          }
        >
          10 seconds
        </Button>
  
        <Button
          onClick={() =>
            notification.info({
              message: 'Persistent',
              description: 'This will not auto-close. Click to dismiss.',
              duration: 0,
            })
          }
        >
          No Auto-close
        </Button>
      </Space>
    )
}

export default App

API

Objet de configuration

Propriété	Description	Type	Défaut
message	Titre de la notification	React.ReactNode	-
description	Contenu de la notification	React.ReactNode	-
duration	Durée de fermeture automatique en secondes	number	4.5
placement	Position de la notification	'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'	'topRight'
type	Type de notification (pour notification.open)	'success' | 'error' | 'info' | 'warning'	-

Méthodes

• notification.success(config) - Notification de succès
• notification.error(config) - Notification d’erreur
• notification.info(config) - Notification d’information
• notification.warning(config) - Notification d’avertissement
• notification.open(config) - Notification générique avec type personnalisé

Accessibilité

• Utilise role="alert" pour les annonces des lecteurs d’écran
• Les notifications sont accessibles au clavier et peuvent être fermées avec la touche Échap
• La couleur et les icônes fournissent des informations redondantes pour l’accessibilité
• Durée définie à 0 crée des notifications persistantes qui nécessitent une fermeture manuelle