SectionMessage

Utilisez un message de section pour informer de l’état d’une section ou d’un groupe d’éléments.

Les messages de section ne peuvent pas être ignorés par l'utilisateur. Supprimez-les une fois la situation résolue ou que l'utilisateur a pris les mesures appropriées.

Usage

import { SectionMessage } from 'nr1';

Exemples

Types

<Stack
  directionType={Stack.DIRECTION_TYPE.VERTICAL}
  horizontalType={Stack.HORIZONTAL_TYPE.FILL}
>
  <StackItem>
    <SectionMessage
      description="Your Metric query has been transformed into a compatible query with the previous Infrastructure metric format."
      actions={[{ label: 'See our docs', to: 'https://support.newrelic.com/' }]}
    />
  </StackItem>
  <StackItem>
    <SectionMessage
      type={SectionMessage.TYPE.SUCCESS}
      title="File has been uploaded"
      description="We are unable to save any progress at this time."
      actions={[
        { label: 'Primary action', onClick: console.log },
        { label: 'Secondary action', onClick: console.log },
      ]}
    />
  </StackItem>
  <StackItem>
    <SectionMessage
      type={SectionMessage.TYPE.WARNING}
      title="Cannot connect to the database"
      description="We are unable to save any progress at this time."
      actions={[
        { label: 'Primary action', onClick: console.log },
        { label: 'Secondary action', onClick: console.log },
      ]}
    />
  </StackItem>
  <StackItem>
    <SectionMessage
      type={SectionMessage.TYPE.CRITICAL}
      title="Error on the request"
      description="We tried to transform your query into a query that is compatible with both new Metric and previous Infrastructure metric formats, but the transformation process failed."
      actions={[
        { label: 'Contact support', to: 'https://support.newrelic.com/' },
      ]}
    />
  </StackItem>
</Stack>;

Accessoires

actions

forme[]

Vous pouvez utiliser jusqu'à deux actions pour aider l'utilisateur à naviguer vers une autre vue, déclencher un événement d'arrière-plan ou modifier le comportement du nerdlet/de la section.

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

className

chaîne

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

description

chaîne

Utilisez-le pour fournir des détails supplémentaires et expliquer, le cas échéant, les étapes à suivre par l'utilisateur.

Remarque : les accessoires title 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

Utilisez-le pour fournir le message principal.Remarque : les accessoires title 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 qu'un élément est nouveau, qu'un élément vient d'être créé ou pour fournir de l'aide.
Succès – Utilisez-le pour communiquer des changements ou des conditions 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 un problème.
<One ofSectionMessage.TYPE.CRITICAL, SectionMessage.TYPE.INFO, SectionMessage.TYPE.SUCCESS, SectionMessage.TYPE.WARNING, >

Cette traduction automatique est fournie pour votre commodité.

SectionMessage

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

Usage

Exemples

Types

Accessoires

forme[]

forme

chaîne

OBLIGATOIRE

chaîne

fonction

forme|chaîne

forme

OBLIGATOIRE

chaîne

chaîne

chaîne

chaîne

chaîne

objet

chaîne

chaîne

énum.

SectionMessage