• /
  • EnglishEspañolFrançais日本語한국어Português
  • Se connecterDémarrer

Cette traduction automatique est fournie pour votre commodité.

En cas d'incohérence entre la version anglaise et la version traduite, la version anglaise prévaudra. Veuillez visiter cette page pour plus d'informations.

Créer un problème

Tile

Usage

import { Tile } from 'nr1';

Exemples

Tuile de base

<Tile onClick={console.log}>
  <HeadingText type={HeadingText.TYPE.HEADING_6}>
    Single location failure
  </HeadingText>
  <BlockText>
    Check your company’s style guides. Great copy that doesn’t fit with the rest
    of the interface or marketing materials can be jarring to users.
  </BlockText>
</Tile>;

Tuile désactivée

<Tile onClick={console.log} disabled>
  <HeadingText type={HeadingText.TYPE.HEADING_6}>
    Single location failure
  </HeadingText>
  <BlockText>
    Check your company’s style guides. Great copy that doesn’t fit with the rest
    of the interface or marketing materials can be jarring to users.
  </BlockText>
</Tile>;

Tuile de lien

<Tile to="https://login.newrelic.com/login">Login</Tile>;

Tailles

<Stack>
  <StackItem>
    <Tile sizeType={Tile.SIZE_TYPE.SMALL} onClick={console.log}>
      <HeadingText type={HeadingText.TYPE.HEADING_6}>
        Single location failure
      </HeadingText>
      <BlockText>
        Check your company’s style guides. Great copy that doesn’t fit with the
        rest of the interface or marketing materials can be jarring to users.
      </BlockText>
    </Tile>
  </StackItem>
  <StackItem>
    <Tile sizeType={Tile.SIZE_TYPE.MEDIUM} onClick={console.log}>
      <HeadingText type={HeadingText.TYPE.HEADING_6}>
        Single location failure
      </HeadingText>
      <BlockText>
        Check your company’s style guides. Great copy that doesn’t fit with the
        rest of the interface or marketing materials can be jarring to users.
      </BlockText>
    </Tile>
  </StackItem>
</Stack>;

Types

<Stack>
  <StackItem>
    <Tile onClick={console.log} type={Tile.TYPE.PLAIN}>
      <HeadingText type={HeadingText.TYPE.HEADING_6}>
        Single location failure
      </HeadingText>
      <BlockText>
        Check your company’s style guides. Great copy that doesn’t fit with the
        rest of the interface or marketing materials can be jarring to users.
      </BlockText>
    </Tile>
  </StackItem>
  <StackItem>
    <Tile onClick={console.log} type={Tile.TYPE.OUTLINE}>
      <HeadingText type={HeadingText.TYPE.HEADING_6}>
        Single location failure
      </HeadingText>
      <BlockText>
        Check your company’s style guides. Great copy that doesn’t fit with the
        rest of the interface or marketing materials can be jarring to users.
      </BlockText>
    </Tile>
  </StackItem>
  <StackItem>
    <Tile onClick={console.log} type={Tile.TYPE.SOLID}>
      <HeadingText type={HeadingText.TYPE.HEADING_6}>
        Single location failure
      </HeadingText>
      <BlockText>
        Check your company’s style guides. Great copy that doesn’t fit with the
        rest of the interface or marketing materials can be jarring to users.
      </BlockText>
    </Tile>
  </StackItem>
</Stack>;

Accessoires

ariaLabel

chaîne

Utilisez-le pour mieux décrire le contexte de l'action du composant pour l'utilisateur sur les lecteurs d'écran.<Tile to="/dashboards" ariaLabel="Go to your dashboard"> Dashboards </Tile>

children

OBLIGATOIRE
nœud

Contenu à restituer à l'intérieur du composant.

className

chaîne

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

disabled

booléen

Lorsque true, la tuile n'est pas disponible pour l'interaction.

onClick

fonction

Le rappel est déclenché à chaque fois que l'utilisateur clique sur la tuile.function (

event: React.MouseEvent
)

sizeType

énum.

Spécifie la taille souhaitée de la tuile (les tailles plus petites ont moins de remplissage interne).<One of

Tile.SIZE_TYPE.MEDIUM, Tile.SIZE_TYPE.SMALL
>

spacingType

énumération[]

Propriété d'espacement. L'espacement est défini comme un uplet de zéro à quatre valeurs, qui suivent les mêmes conventions que les propriétés CSS comme margin ou padding. Pour omettre une valeur, utilisez SPACING_TYPE.OMIT.<Array of

<One of
Tile.SPACING_TYPE.EXTRA_LARGE, Tile.SPACING_TYPE.LARGE, Tile.SPACING_TYPE.MEDIUM, Tile.SPACING_TYPE.NONE, Tile.SPACING_TYPE.OMIT, Tile.SPACING_TYPE.SMALL
>
>

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.

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

type

énum.

Le type peut être :

  • Uni — à utiliser lorsque les carreaux n'ont pas besoin d'être mis en valeur.

  • Contour — le type de tuile par défaut.

  • Solide — à utiliser lorsque les carreaux doivent contraster avec un fond blanc.

    <One of

    Tile.TYPE.OUTLINE, Tile.TYPE.PLAIN, Tile.TYPE.SOLID,

    >

value

chaîne|nombre

Identifiant unique de la tuile. Utilisé par le <TileGroup> pour identifier les tuiles cochées.

Droits d'auteur © 2025 New Relic Inc.
RecrutementConditions de servicePolitique DMCAAvis de confidentialitéCookiesLoi britannique sur l'esclavage

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.