Styliser votre application

Découvrez comment personnaliser les composants d'interface utilisateur dans votre application.

Vous pouvez définir le style d’une application Stripe à l’aide des tokens de design que nous vous fournissons. Ils vous aident à reproduire l’apparence du Dashboard, proposent une expérience cohérente et garantissent un niveau de qualité élevé.

Les composants Box et Inline prennent en charge les styles personnalisés.
D’autres composants ont des styles prédéfinis que vous pouvez parfois ajuster.

Styles personnalisés

Les composants Box et Inline prennent en charge les styles personnalisés. Box et Inline sont des conteneurs stylisables comme div et span en HTML. Pour leur attribuer un style, servez-vous de leur propriété css. Ils utilisent la syntaxe de CSS, avec quelques différences par rapport à la CSS Vanilla.

<Box
  css={{
    padding: 'xxlarge',
    color: 'secondary',
    backgroundColor: 'container',
    borderRadius: 'small',
  }}
>
  This is a box.
</Box>

Contrairement au CSS vanilla, vous ne pouvez pas choisir de polices et de styles arbitraires. Utilisez les propriétés font et fontWeight. Pour en savoir plus, consultez la section Typographie.

<Inline css={{font: 'body', color: 'primary', fontWeight: 'semibold'}}>
  This text is emphasized
</Inline>

En outre, la mise en page ne fonctionne pas de la même façon qu’avec le CSS vanilla. Stripe Apps utilise le même système de mise en page que Stripe utilise en interne. Pour en savoir plus, consultez la section Mise en page.

<Box
  css={{
    stack: 'x',
    gap: 'medium',
  }}
>
  <Box css={{width: '1/4', padding: 'medium', keyline: 'neutral'}} />
  <Box css={{width: '3/4', padding: 'medium', keyline: 'neutral'}} />
</Box>

Tous les tokens de style sont présentés via TypeScript, ce qui signifie que vous disposerez d’une liste déroulante dans votre éditeur pour effectuer une saisie automatique à partir des valeurs disponibles.

Couleur

Configurez des couleurs dans vos styles personnalisés en utilisant les valeurs suivantes.

Arrière-plans

Pour définir la couleur d’arrière-plan d’un composant Box ou Inline, utilisez la propriété CSS backgroundColor :

<Box css={{ backgroundColor: 'container' }}>
  Box with a darker background.
</Box>

Utilisez les tokens suivants comme valeurs pour backgroundColor :

Example	Token	Usage
	`surface`	Used for the background of apps
	`container`	Used for cards and sections within an app

Bordures

Pour ajouter une bordure à un composant Box or Inline, utilisez la propriété CSS keyline :

<Box css={{ keyline: 'neutral' }}>
  Box with a neutral border.
</Box>

Utilisez les tokens suivants comme valeurs pour keyline :

Example	Token	Usage
	`neutral`	The default color for all borders and dividers
	`critical`	Used for content which is critically urgent to the user

Texte et icônes

Pour définir une couleur pour l’ensemble des textes ou icônes d’un composant Box ou Inline, utilisez la propriété CSS color :

<Box css={{ color: 'success' }}>
  Box with green text.
</Box>

Pour obtenir une icône contrastant avec les autres enfants de son conteneur, utilisez fill. Sinon, les icônes auront la même couleur que le texte qui les entoure.

<Box css={{ color: 'primary' }}>
  <Icon css={{ fill: 'success' }}/>
  Box with normal text and a green icon.
</Box>

Utilisez les tokens suivants comme valeurs pour color et fill :

Example	Token	Usage
	`primary`	The default color for text and icons
	`secondary`	Used to for text and icons which are less prominent
	`disabled`	Used for elements which are disabled
	`info`	Used for content that is neutral and informational
	`success`	Used for content which indicates the success of some action
	`attention`	Used for content which is should grab the user’s attention
	`critical`	Used for content which is critically urgent to the user. Should be used sparingly.

Typographie

Pour modifier le style d’un texte dans un composant Box ou Inline, utilisez la propriété personnalisée font :

<Inline css={{font: 'heading'}}>Heading</Inline>

Les styles suivants sont disponibles :

Token	Usage	Example
heading	Used for labeling a section of your app	The quick brown fox jumps over the lazy dog.
subheading	Used for labeling content within a section of your app	The quick brown fox jumps over the lazy dog.
body	Primary body text of the app	The quick brown fox jumps over the lazy dog.
caption	Used for text that should be less prominent than body text	The quick brown fox jumps over the lazy dog.

Débordement et habillage du texte

Pour modifier la manière dont le texte de débordement est géré dans un composant Box, utilisez les propriétés textOverflow, overflow, whiteSpace et overflowWrap :

<Box css={{textOverflow: 'ellipsis', overflow: 'hidden', overflowWrap: 'normal'}}>
  Box where long text is cut off with an ellipsis
</Box>

CSS	Usage	Example
{textOverflow: 'ellipsis', overflow: 'hidden', overflowWrap: 'normal'}	Used for adding an ellipsis (...) to text that overflows the available space	SupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidocious
{overflowWrap: 'break-word'}	Used for breaking up long words	SupercalifragilisticexpialidociousSupercalifragilisticexpialidocious
{whiteSpace: 'nowrap'}	Used to prevent lines from wrapping	This text is too long for the container.

Pour voir plus de scénarios de débordement et d’habillage de texte, consultez la page Wrapping and Breaking Text.

Modification de la capitalisation du texte

Vous pouvez modifier la capitalisation du texte dans un composant Box ou Inline en utilisant la propriété textTransform :

<Box css={{textTransform: 'uppercase'}}>
  Box where all text appears uppercase
</Box>

Voici quelques valeurs couramment utilisées pour la propriété textTransform :

Token	Usage	Before	After
capitalize	Used to convert the first letter of each word to uppercase	Lorem ipsum dolor sit amet	Lorem ipsum dolor sit amet
uppercase	Used to convert all letters to uppercase	Lorem ipsum dolor sit amet	Lorem ipsum dolor sit amet
lowercase	Used to convert all letters to lowercase	Lorem ipsum dolor sit amet	Lorem ipsum dolor sit amet
none	Used to prevent the case of letters from being changed	loREM iPSUm DOLor SIt AMet	loREM iPSUm DOLor SIt AMet

Consultez la rubrique text-transform pour voir la liste complète.

Alignement du texte

Vous pouvez modifier l’alignement du texte dans un composant Box en utilisant la propriété textAlign :

<Box css={{textAlign: 'center'}}>
  Box where text is centered
</Box>

Utilisez les valeurs de token suivantes pour textAlign :

Token	Usage	Example
left	Used to algin text to the left	This text is left aligned
right	Used to align text to the right	This text is right aligned
start	Used align text to the start direction	This text is start aligned
end	Used to align text to the end direction	This text is end aligned
center	Used to center text	This text is centered
justify	Used to justify text	This is some text that is justified

Disposition

L’API de mise en page pour Stripe Apps vous permet de créer des styles qui tirent profit de nos tokens de conception, et apporte d’autres améliorations pour CSS Vanilla. Utilisez ces tokens dans un composant Box pour contrôler la mise en page pour ses enfants. D’autre conteneurs, comme le composant List, gèrent la mise en page automatiquement.

Nous employons le terme « empilements » pour désigner les différentes mises en page.

Empilements horizontaux

Pour empiler des éléments horizontalement en faisant correspondre les largeurs :

<Box
  css={{
    stack: 'x',
    gap: 'medium',
    alignX: 'stretch', // This is the default and can be omitted
  }}
>

Pour empiler des éléments horizontalement avec des largeurs sous forme de fraction :

<Box
  css={{
    stack: 'x',
    gap: 'medium',
  }}
>
  <Box css={{width: '1/4', padding: 'medium', keyline: 'neutral'}} />
  <Box css={{width: '3/4', padding: 'medium', keyline: 'neutral'}} />
</Box>

Pour empiler des éléments horizontalement avec une largeur sous forme de fraction pour un élément et le reste des éléments étirés :

<Box
  css={{
    stack: 'x',
    gap: 'medium',
  }}
>
  <Box css={{padding: 'medium', keyline: 'neutral'}} />
  <Box css={{width: '1/4', padding: 'medium', keyline: 'neutral'}} />
  <Box css={{padding: 'medium', keyline: 'neutral'}} />
</Box>

Pour aligner des éléments en début de page en insérant un espacement :

<Box
  css={{
    stack: 'x',
    gap: 'medium',
    alignX: 'start',
  }}
>

Pour distribuer des éléments :

<Box
  css={{
    stack: 'x',
    distribute: 'space-between',
  }}
>

Pour aligner des éléments en fin de page en insérant un espacement :

<Box
  css={{
    stack: 'x',
    gap: 'medium',
    alignX: 'end',
  }}
>

Pour aligner des éléments de manière verticale en bas de page :

<Box
  css={{
    stack: 'x',
    gap: 'medium',
    alignX: 'start',
    alignY: 'bottom',
  }}
>

Pour inclure des séparateurs entre les éléments :

<Box
  css={{
    stack: 'x',
    gap: 'small',
    alignX: 'start',
  }}
>
  <Box css={{padding: 'medium', keyline: 'neutral'}} />
  <Divider />
  <Box css={{padding: 'medium', keyline: 'neutral'}} />
  <Divider />
  <Box css={{padding: 'medium', keyline: 'neutral'}} />
</Box>

Pour inclure des postes dans des lignes :

<Box
  css={{
    stack: 'x',
    gap: 'medium',
    wrap: 'wrap',
    alignX: 'start',
  }}
>

Pour avoir un espacement horizontal et vertical différent :

<Box
  css={{
    stack: 'x',
    gapX: 'small',
    gapY: 'large',
    wrap: 'wrap',
    alignX: 'start',
  }}
>

Pour centrer des éléments horizontalement lors de l’habillage :

<Box
  css={{
    stack: 'x',
    gap: 'medium',
    wrap: 'wrap',
    alignX: 'center',
  }}
>

Pour centrer des éléments verticalement lors de l’habillage :

<Box
  css={{
    stack: 'x',
    gap: 'medium',
    wrap: 'wrap',
    alignX: 'start',
    alignY: 'center',
  }}
>

Empilements verticaux

Pour empiler des éléments verticalement en faisant correspondre les largeurs :

<Box
  css={{
    stack: 'y',
    gap: 'medium',
  }}
>

Pour empiler des éléments verticalement alors qu’ils sont centrés horizontalement :

<Box
  css={{
    stack: 'y',
    gap: 'medium',
    alignX: 'center',
  }}
>
  <Box css={{width: '1/4', padding: 'medium', keyline: 'neutral'}} />
  <Box css={{width: '2/3', padding: 'medium', keyline: 'neutral'}} />
  <Box css={{width: '1/3', padding: 'medium', keyline: 'neutral'}} />
</Box>

Empilements en cascade

Pour afficher les éléments les uns au-dessus des autres :

<Box
  css={{
    stack: 'z',
    alignX: 'center',
    alignY: 'center',
  }}
>
  <Box css={{padding: 'xxlarge', keyline: 'neutral'}} />
  <Box css={{padding: 'large', keyline: 'neutral'}} />
  <Box css={{padding: 'small', keyline: 'neutral'}} />
</Box>

Propriétés de mise en page

Propriété	Valeurs
`alignX`	`'start' \| 'center' \| 'end' \| 'stretch'`
`alignY`	`'top' \| 'center' \| 'baseline' \| 'bottom' \| 'stretch'`
`distribute`	`'space-between' \| 'packed'`
`gap`	Consultez la page Espacement
`overflowX \| overflowY`	`'visible' \| 'hidden' \| 'scroll' \| 'auto'`
`stack`	`'x' \| 'y' \| 'z'`
`wrap`	`'wrap'`

Espacement

Vous pouvez définir les marges extérieures, les marges intérieures et les espacements de mise en page à l’aide des valeurs indiquées ci-après.

<Box css={{margin: 'small'}} />

Token	Valeur
`0`	0 px
`xxsmall`	2 px
`xsmall`	4 px
`small`	8 px
`medium`	16 px
`large`	24 px
`xlarge`	32 px
`xxlarge`	48 px

Dimensionnement

Vous pouvez définir la largeur et la taille à l’aide de fractions ou de tokens de dimensionnement basés sur le contenu.

<Box css={{width: '1/2'}} />

Dimensionnement fractionnel

Les fractions disponibles sont les moitiés, les tiers, les quarts, les cinquièmes, les sixièmes et les douzièmes. Le token fill permet à un composant de s’adapter à la taille de son conteneur.

Token	Valeur
`0`	0 px
`1/2`	50 %
`1/3`, `2/3`	33,333333 %, 66,666667 %
`1/4`, `2/4`, `3/4`,	25 %, 50 %, 75 %
`1/5`, `2/5`, `3/5`, `4/5`	20 %, 40 %, 60 %, 80 %
`1/6`, `2/6`, `3/6`, `4/6`, `5/6`	16,666667 %, 33,333333 %, 50 %, 66,666667 %, 83,333333 %
`1/12`, `2/12`, `3/12`, `4/12`, `5/12`, `6/12`, `7/12`, `8/12`, `9/12`, `10/12`, `11/12`	8,333333 %, 16,666667 %, 25 %, 33,333333 %, 41,666667 %, 50 %, 58,333333 %, 66,666667 %, 75 %, 83,333333 %, 91,666667 %
`fill`	100 %

Dimensionnement basé sur le contenu

Vous pouvez dimensionner une Box selon son contenu.

Token	Utilisation
`min`	Le contenu du composant tire parti de toutes les possibilités de mise en forme, jusqu’à devenir aussi petit que le plus long des contenus.
`max`	Représente la largeur maximale possible du contenu. Lorsqu’elle est appliquée au texte, celui-ci ne change pas de format, même si cela a pour effet de le faire dépasser hors des limites de son conteneur.
`fit`	Remplit l’espace disponible, jusqu’à la taille maximale du contenu uniquement.

Styles prédéfinis

Les composants autres que Box et Inline disposent de styles prédéfinis, ce qui permet de conserver une expérience cohérente. Vous pouvez parfois contrôler ou annuler les réglages prédéfinis d’une certaine façon.

Stylisation automatique

Certains composants disposent de styles appliqués automatiquement. Par exemple, les puces changent automatiquement d’apparence en fonction des rappels qu’elles implémentent. Cela permet à l’utilisateur de comprendre leur comportement. Afin d’éviter toute confusion, vous ne pouvez pas remplacer ces informations.

<ChipList>
  <Chip
    label="Currency"
    value="USD"
    onDropdown={() => {
      alert('Dropdown function triggered');
    }}
    onClose={() => {
      alert('Close function triggered');
    }}
  />
  <Chip
    label="Status"
    value="Succeeded"
    onDropdown={() => {
      alert('Dropdown function triggered');
    }}
    onClose={() => {
      alert('Close function triggered');
    }}
  />
  <Chip
    label="Amount"
    onAddSuggestion={() => {
      alert('Add Amount suggestion');
    }}
  />
  <Chip
    label="Date"
    onAddSuggestion={() => {
      alert('Add Date suggestion');
    }}
  />
</ChipList>

Plusieurs réglages prédéfinis

Certains composants, tels que les Buttons, ont plusieurs styles que vous pouvez sélectionner en utilisant une propriété. Consultez la documentation de chaque composant pour en savoir plus.

<Button type="primary">Primary</Button>
<Button>Secondary</Button>
<Button type="destructive">Destructive</Button>

CSS limité

Certains composants prennent en charge des propriétés CSS spécifiques. Par exemple, les Icons prennent en charge les couleurs en utilisant la propriété fill. Consultez la documentation de chaque composant pour en savoir plus.

<Icon name="cancelCircle" css={{fill: 'critical'}} />