InlineMessage

Utilisez les messages en ligne lorsqu’un élément nécessite une attention particulière. Ils alertent l'utilisateur qu'une information importante est disponible ou qu'une action est requise et disparaissent une fois que l'utilisateur a pris l'action appropriée.

Le message en ligne utilise une icône comme élément principal pour donner un indicateur visuel du type et de l'urgence du message. L'icône peut être combinée avec une étiquette optionnelle pour mettre en évidence son message.

Le message en ligne révèle une boîte de dialogue qui fournit un résumé du problème et des liens vers des informations ou des actions lorsque l'utilisateur survole l'icône ou la combinaison icône et étiquette.

Usage

import { InlineMessage } from 'nr1'

Exemples

Types

<Stack>
  <StackItem>
    <InlineMessage label="We have updated the data for this chart." />
  </StackItem>
  <StackItem>
    <InlineMessage
      type={InlineMessage.TYPE.SUCCESS}
      label="The entity has been successfully created"
    />
  </StackItem>
  <StackItem>
    <InlineMessage
      type={InlineMessage.TYPE.WARNING}
      label="The edition is restricted for this account."
    />
  </StackItem>
  <StackItem>
    <InlineMessage
      type={InlineMessage.TYPE.CRITICAL}
      label="We couldn't fetch the data."
    />
  </StackItem>
</Stack>

Étiquette et action

<InlineMessage
  type={InlineMessage.TYPE.CRITICAL}
  label="We couldn't transform the query."
  action={{ label: 'See the documentation', onClick: console.log }}
/>

Dialogue avec détails

<InlineMessage
  type={InlineMessage.TYPE.SUCCESS}
  label="The data has been added."
  description="You have successfully added 3 new hosts."
  action={{ label: 'See the hosts', onClick: console.log }}
/>

Icône uniquement

<InlineMessage
  type={InlineMessage.TYPE.CRITICAL}
  title="We can't render this query."
  description="We tried to transform your query into a query that is compatible with both Metric and previous Infrastructure methods, but some expressions weren’t available."
  action={{ label: 'See NRQL documentation', to: '//docs.newrelic.com' }}
/>

Accessoires

action

forme

Vous pouvez spécifier une action pour fournir à l'utilisateur des étapes concrètes à suivre pour éviter de le conduire dans une impasse.

forme

ariaLabel

chaîne

label

OBLIGATOIRE

chaîne

onClick

fonction

Le rappel est déclenché à chaque fois que l'utilisateur clique sur le bouton.

function (event: React.MouseEvent 
)

to

forme|chaîne

Objet d'emplacement ou chaîne d'URL vers laquelle créer un lien.

forme

pathname

OBLIGATOIRE

chaîne

search

chaîne

hash

chaîne

ariaLabel

chaîne

Fournissez une étiquette aux lecteurs d’écran pour décrire le message d’état. Ceci n'est requis que si l'étiquette du lecteur d'écran doit être différente de l'accessoire label , ou si vous ne fournissez pas du tout d'accessoire label .

className

chaîne

Ajoute les noms de classe au composant. Doit être utilisé uniquement à des fins de positionnement et d'espacement.

description

chaîne

Doit être utilisé pour fournir plus de détails dans la boîte de dialogue et compléter le titre.Remarque : les accessoires title, label et description sont facultatifs, mais au moins l'un d'entre eux doit être fourni.

label

chaîne

Bref résumé de l'état. Utilisez l'étiquette lorsque cela est possible pour décrire brièvement l'état du composant et lorsqu'il n'y a pas de limitations d'espacement.Remarque : les accessoires title, label et description sont facultatifs, mais au moins l'un d'entre eux doit être fourni.

style

objet

Style en ligne pour un style personnalisé. Doit être utilisé uniquement à des fins de positionnement et d'espacement.

testId

chaîne

Ajoute un attribut data-test-id. Utilisez-le pour cibler le composant dans les tests unitaires et E2E. Pour qu'un identifiant de test soit valide, préfixez-le avec votre identifiant nerdpack, suivi d'un point. Par exemple, my-nerdpack.some-element.

Remarque : vous ne verrez peut-être pas l'attribut data-test-id car ils sont supprimés du DOM. Pour les déboguer, transmettez un paramètre de requête e2e-test à l'URL.

title

chaîne

Titre affiché dans la boîte de dialogue.Remarque : les accessoires title, label et description sont facultatifs, mais au moins l'un d'entre eux doit être fourni.

type

énum.

Le type peut être :

Info (par défaut) — utilisez-le pour indiquer l'état général ou en cours.
Succès — utilisez-le pour communiquer des changements positifs.
Avertissement — utilisez-le pour communiquer un problème potentiel, une situation indésirable, un conseil de prudence ou un préavis quelconque.
Critique — utilisez-le pour communiquer des problèmes.
<One ofInlineMessage.TYPE.CRITICAL, InlineMessage.TYPE.INFO, InlineMessage.TYPE.SUCCESS, InlineMessage.TYPE.WARNING >

Cette traduction automatique est fournie pour votre commodité.

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Exemples

Types

Étiquette et action

Dialogue avec détails

Icône uniquement

Accessoires

forme

forme

chaîne

OBLIGATOIRE

chaîne

fonction

forme|chaîne

forme

OBLIGATOIRE

chaîne

chaîne

chaîne

chaîne

chaîne

chaîne

chaîne

objet

chaîne

chaîne

énum.

Usage