Alert
Une alerte affiche un message court et important d'une manière qui attire l'attention de l'utilisateur sans interrompre sa tâche.
Remarque : Ce composant n'est pas documenté dans les consignes de Material Design, mais Material-UI le supporte.
Alertes simples
L'alerte offre quatre niveaux de sévérité qui définissent une icône et une couleur distinctes.
<Alert severity="error">This is an error alert — check it out!</Alert>
<Alert severity="warning">This is a warning alert — check it out!</Alert>
<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>Description
Vous pouvez utiliser le composant AlertTitle pour afficher un titre formaté au-dessus du contenu.
<Alert severity="error">
<AlertTitle>Error</AlertTitle>
This is an error alert — <strong>check it out!</strong>
</Alert>
<Alert severity="warning">
<AlertTitle>Warning</AlertTitle>
This is a warning alert — <strong>check it out!</strong>
</Alert>
<Alert severity="info">
<AlertTitle>Info</AlertTitle>
This is an info alert — <strong>check it out!</strong>
</Alert>
<Alert severity="success">
<AlertTitle>Success</AlertTitle>
This is a success alert — <strong>check it out!</strong>
</Alert>Actions
Une alerte peut avoir une action, comme un bouton de fermeture ou d'annulation. Il est affiché après le message, à la fin de l'alerte.
Si une fonction de rappel onClose est fournie et qu'aucune propriété action n'est définie, une icône de fermeture s'affiche. La propriété action peut être utilisée pour fournir une action alternative, par exemple en utilisant un Button ou un IconButton.
<Alert onClose={() => {}}>This is a success alert — check it out!</Alert>
<Alert
action={
<Button color="inherit" size="small">
UNDO
</Button>
}
>
This is a success alert — check it out!
</Alert>Transition
Vous pouvez utiliser un composant de transition tel que Collapse pour faire la transition de l'apparence de l'alerte.
Icônes
La propriété icon vous permet d'ajouter une icône au début du composant d'alerte. Cela remplacera l'icône par défaut pour la sévérité spécifiée.
Vous pouvez changer la sévérité par défaut pour le mapping d'icône avec la propriété iconMapping. Ceci peut être défini globalement en utilisant la personnalisation du thème.
Définir la propriété icon à false supprimera complètement l'icône.
<Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
This is a success alert — check it out!
</Alert>
<Alert iconMapping={{ success: <CheckCircleOutlineIcon fontSize="inherit" /> }}>
This is a success alert — check it out!
</Alert>
<Alert icon={false} severity="success">
This is a success alert — check it out!
</Alert><Alert variant="outlined" severity="error">
This is an error alert — check it out!
</Alert>
<Alert variant="outlined" severity="warning">
This is a warning alert — check it out!
</Alert>
<Alert variant="outlined" severity="info">
This is an info alert — check it out!
</Alert>
<Alert variant="outlined" severity="success">
This is a success alert — check it out!
</Alert><Alert variant="filled" severity="error">
This is an error alert — check it out!
</Alert>
<Alert variant="filled" severity="warning">
This is a warning alert — check it out!
</Alert>
<Alert variant="filled" severity="info">
This is an info alert — check it out!
</Alert>
<Alert variant="filled" severity="success">
This is a success alert — check it out!
</Alert>Toast
Vous pouvez utiliser la Snackbar pour afficher un toast avec l'alerte.
Couleur
La propriété color remplacera la couleur par défaut pour la sévérité spécifiée.
<Alert severity="success" color="info">
This is a success alert — check it out!
</Alert>Accessibilité
(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#alert)
Lorsque le composant est affiché dynamiquement, le contenu est automatiquement annoncé par la plupart des lecteurs d'écran. À l'heure actuelle, les lecteurs d'écran n'informent pas les utilisateurs des alertes présentes lors du chargement de la page.
L'utilisation de la couleur pour ajouter de la signification ne fournit qu'une indication visuelle qui ne sera pas transmise aux utilisateurs de technologies d'assistance telles que les lecteurs d'écran. Assurez-vous que les informations indiquées par la couleur sont soit évidentes à partir du contenu lui-même (par exemple le texte visible), ou est inclus par d'autres moyens, tels que le texte caché supplémentaire.
Les actions doivent avoir un index de tabulation de 0 pour être accessibles aux utilisateurs utilisant uniquement le clavier.