La notification Toast donne à l'utilisateur une confirmation immédiate de la réussite d'une tâche ou d'un échec critique lors de la tentative d'achèvement d'une tâche.
Vous pouvez personnaliser le toast en passant des actions personnalisées qui s'afficheront sous forme de boutons cliquables à côté du texte.
Usage
import { Toast } from 'nr1'Exemples
Notification toast de base
function render() { const onClick = () => Toast.showToast({ title: 'Feedback received', description: 'We will contact you soon.', actions: [ { label: 'Go back', onClick: () => console.log('Go back'), }, ], type: Toast.TYPE.NORMAL, });
return <Button onClick={onClick}>Show toast</Button>;}Avec un lien d'informations supplémentaires
function render() { const onClick = () => Toast.showToast({ title: 'TV Mode activated', description: 'Press ESC to exit', additionalInfoLink: { label: 'Learn more about TV Mode', to: 'https://discuss.newrelic.com/t/tv-mode-in-new-relic-one/92963', }, type: Toast.TYPE.NORMAL, });
return <Button onClick={onClick}>Show toast</Button>;}Notification toast critique
function render() { const onClick = () => Toast.showToast({ title: 'Service unavailable', description: 'Your data could not be retrieved', actions: [ { label: 'Retry', onClick: () => console.log('Retry'), }, ], type: Toast.TYPE.CRITICAL, });
return <Button onClick={onClick}>Update</Button>;}Accessoires
forme[] | Si vous avez une action spécifique parmi laquelle vous souhaitez que l'utilisateur puisse choisir, utilisez le composant d'action personnalisé. Nous recommandons de limiter l'utilisation de plusieurs actions car cette notification est destinée à indiquer à l'utilisateur la réussite ou l'échec d'une tâche et n'est pas censée être utilisée pour diriger l'utilisateur vers une autre tâche. forme
OBLIGATOIREchaîne
OBLIGATOIREfonction |
forme | Les informations présentées dans le titre et la description peuvent être complétées/étendues par un lien vers la documentation. Ce lien ne doit être utilisé que pour fournir des informations contextuelles et non comme une action. forme
OBLIGATOIREchaîne
fonctionLe rappel est déclenché à chaque fois que l'utilisateur clique sur le bouton. function (
forme|chaîneObjet d'emplacement ou chaîne d'URL vers laquelle créer un lien. formepathname OBLIGATOIREchaîne
chaîne
chaîne |
chaîne | Ajoute les noms de classe au composant. Doit être utilisé uniquement à des fins de positionnement et d'espacement. |
chaîne | Nous vous recommandons de fournir un titre et un message pour donner un contexte au succès ou à l’échec de l’action précédente entreprise. Vous pouvez même utiliser la zone de message pour fournir à l'utilisateur un lien pour accéder à l'objet qu'il vient de créer dans le système. |
fonction | Rappel exécuté après que le toast soit caché. |
fonction | Rappel exécuté lorsque l'animation de masquage démarre. |
booléen | Pour les tâches ne nécessitant pas le rejet explicite ou la visualisation par un utilisateur, nous vous recommandons d'utiliser une notification de délai d'expiration afin que le message disparaisse automatiquement de l'écran après une courte période de temps. |
objet | Style en ligne pour un style personnalisé. Doit être utilisé uniquement à des fins de positionnement et d'espacement. |
chaîne | Ajoute un attribut Remarque : vous ne verrez peut-être pas l'attribut |
OBLIGATOIREchaîne | Nous ne recommandons pas d'utiliser l'option titre uniquement, car cela ne fournit PAS de contexte à l'utilisateur quant à la tâche qu'il vient d'effectuer. |
énum. |
|
Méthodes
Toast.showToast
function (props: Object Object containing the Toast options. Any Toast prop is valid as an option.
) => undefined