BlockText

BlockText

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 { BlockText } from 'nr1'

Exemples

Basique

<>
  <BlockText>
    Typography is at the core of <strong>great</strong> user interface design.
  </BlockText>
</>

Types

<>
  <BlockText type={BlockText.TYPE.NORMAL}>
    Typography is at the core of <strong>great</strong> user interface design.
  </BlockText>
  <BlockText type={BlockText.TYPE.PARAGRAPH}>
    Typography is at the core of <strong>great</strong> user interface design.
  </BlockText>
</>

Changement sémantique

<BlockText type={BlockText.TYPE.PARAGRAPH} tagType={BlockText.TYPE.DIV}>
  This is a div element styled as a paragraph
</BlockText>

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 ofBlockText.SPACING_TYPE.EXTRA_LARGE, BlockText.SPACING_TYPE.LARGE, BlockText.SPACING_TYPE.MEDIUM, BlockText.SPACING_TYPE.NONE, BlockText.SPACING_TYPE.OMIT, BlockText.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 ofBlockText.TAG_TYPE.DIV, BlockText.TAG_TYPE.P
>

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 ofBlockText.TYPE.NORMAL, BlockText.TYPE.PARAGRAPH
>

Cette traduction automatique est fournie pour votre commodité.

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

Exemples

Basique

Types

Changement sémantique

Accessoires

nœud

chaîne

énumération[]

objet

énum.

chaîne

énum.

Usage