Retourner sur papillon.bzhTélécharger PapillonVoir le code

Typography

Typography est un remplacement de Text qui applique automatiquement le thème et les règles d'interface de Papillon UI sur l'ensemble de l'UI Kit.

Exemple

Cet exemple affiche un titre de la couleur principale.

example.tsx
<Typography
  variant="h1"
  color="primary"
>
  Lorem ipsum
</Typography>
Note sur les polices pré-installées

En plus des polices préinstallées dans l'OS, Papillon importe SN Pro sous les noms suivants :

  • light

  • regular

  • medium

  • semibold

  • bold

Propriétés

Typography étend Text et dispose de toutes ses propriétés

variant

Style du texte (parmi les variantes disponibles)

Variantes disponibles

  • Corps de texte

    • body1

    • body2

  • Titres

    • h1

    • h2

    • h3

    • h4

    • h5

    • h6

  • UI

    • title

    • caption

    • button

    • navigation

Type
Valeur par défaut

String

body1

color

Couleur du texte (parmi les couleurs par défaut ou custom)

Couleurs de base

  • primary

  • text

  • secondary

  • light

  • danger

Type
Valeur par défaut

Couleur (HEX) ou String

text

align

Alignement du texte :

  • left

  • center

  • right

Type
Valeur par défaut

String

left

inline

Indique si le texte ne doit PAS prendre toute la largeur

Type
Valeur par défaut

Booléen

false

nowrap

Empêche le texte de passer sur plusieurs lignes

Type
Valeur par défaut

Booléen

false

weight

Police d'écriture (et non l'épaisseur puisqu'elle ne fonctionne pas sur les fonts custom)

Type

String

PrécédentIconSuivantCourse

Mis à jour