• /
  • 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

HeadingText

Les styles typographiques sont utilisés dans toute l'interface utilisateur. S'ils sont utilisés de manière cohérente, ils vous aideront à maintenir une hiérarchie claire pour votre utilisateur.

Usage

import { HeadingText } from 'nr1'

Exemples

Basique

<>
  <HeadingText>Heading 4 (default)</HeadingText>
</>

Basique

<>
  <HeadingText type={HeadingText.TYPE.HEADING_1}>Heading 1</HeadingText>
  <HeadingText type={HeadingText.TYPE.HEADING_2}>Heading 2</HeadingText>
  <HeadingText type={HeadingText.TYPE.HEADING_3}>Heading 3</HeadingText>
  <HeadingText type={HeadingText.TYPE.HEADING_4}>Heading 4</HeadingText>
  <HeadingText type={HeadingText.TYPE.HEADING_5}>Heading 5</HeadingText>
  <HeadingText type={HeadingText.TYPE.HEADING_6}>Heading 6</HeadingText>
</>

Changement sémantique

<HeadingText
  type={HeadingText.TYPE.HEADING_1}
  tagType={HeadingText.TAG_TYPE.DIV}
>
  This is a div element styled as a h1
</HeadingText>

Accessoires

children

nœud

Texte à afficher.

className

chaîne

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

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

HeadingText.SPACING_TYPE.EXTRA_LARGE, HeadingText.SPACING_TYPE.LARGE, HeadingText.SPACING_TYPE.MEDIUM, HeadingText.SPACING_TYPE.NONE, HeadingText.SPACING_TYPE.OMIT, HeadingText.SPACING_TYPE.SMALL

>
>

style

objet

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

tagType

énum.

Balise dans laquelle envelopper le texte. Utile pour changer le sens sémantique du texte. Ceci ne s'applique à aucun style.

<One of

HeadingText.TAG_TYPE.DIV, HeadingText.TAG_TYPE.H1, HeadingText.TAG_TYPE.H2, HeadingText.TAG_TYPE.H3, HeadingText.TAG_TYPE.H4, HeadingText.TAG_TYPE.H5, HeadingText.TAG_TYPE.H6

>

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.

type

énum.

Type de texte que vous souhaitez afficher. Cela applique des styles en fonction du type.

<One of

HeadingText.TYPE.HEADING_1, HeadingText.TYPE.HEADING_2, HeadingText.TYPE.HEADING_3, HeadingText.TYPE.HEADING_4, HeadingText.TYPE.HEADING_5, HeadingText.TYPE.HEADING_6

>
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.