Composant de case pour les applications Stripe

Utilisez les composants Box pour envelopper les autres composants et ajouter des styles et mises en page personnalisés.

Version du SDK

Pour ajouter le composant Box à votre application :

import {Box} from '@stripe/ui-extension-sdk/ui';

Les boîtes sont des éléments de niveau bloc équivalents à un élément HTML div. Elles prennent en charge les styles personnalisés. Si vous souhaitez afficher ou styliser des éléments de type Inline, reportez-vous à la section consacrée au composant Inline.

Chargement de l'exemple...

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

Propriétés des boîtes

Propriété Type

Propriété	Type
`children`	Obligatoire `React.ReactNode` Le contenu du composant.
`css`	Facultatif `CSS \| undefined` Types associés : CSS.

children

Obligatoire

React.ReactNode

Le contenu du composant.

css

Facultatif

CSS | undefined

Types associés : CSS.

CSS

Propriété	Type
`alignSelfX`	Facultatif `("start" \| "center" \| "end" \| "stretch") \| undefined` Alignement horizontal. Pour en savoir plus, consultez les propriétés de mise en page.
`alignSelfY`	Facultatif `("top" \| "center" \| "baseline" \| "bottom" \| "stretch") \| undefined` Alignement vertical. Pour en savoir plus, consultez les propriétés de mise en page.
`alignX`	Facultatif `("start" \| "center" \| "end" \| "stretch") \| undefined` Alignement horizontal. Pour en savoir plus, consultez les propriétés de mise en page.
`alignY`	Facultatif `("top" \| "center" \| "baseline" \| "bottom" \| "stretch") \| undefined` Alignement vertical. Pour en savoir plus, consultez les propriétés de mise en page.
`backgroundColor`	Facultatif `("container" \| "surface") \| undefined`
`bleed`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`bleedBottom`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`bleedLeft`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`bleedRight`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`bleedTop`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`bleedX`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`bleedY`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`borderBottomColor`	Facultatif `("neutral" \| "critical") \| undefined`
`borderBottomLeftRadius`	Facultatif `("none" \| "xsmall" \| "small" \| "medium" \| "large" \| "rounded") \| undefined`
`borderBottomRightRadius`	Facultatif `("none" \| "xsmall" \| "small" \| "medium" \| "large" \| "rounded") \| undefined`
`borderBottomStyle`	Facultatif `("dashed" \| "dotted" \| "double" \| "groove" \| "hidden" \| "inherit" \| "initial" \| "inset" \| "none" \| "outset" \| "revert-layer" \| "revert" \| "ridge" \| "solid" \| "unset") \| undefined`
`borderBottomWidth`	Facultatif `number \| undefined` Largeur de la bordure.
`borderColor`	Facultatif `("neutral" \| "critical") \| undefined`
`borderLeftColor`	Facultatif `("neutral" \| "critical") \| undefined`
`borderLeftStyle`	Facultatif `("dashed" \| "dotted" \| "double" \| "groove" \| "hidden" \| "inherit" \| "initial" \| "inset" \| "none" \| "outset" \| "revert-layer" \| "revert" \| "ridge" \| "solid" \| "unset") \| undefined`
`borderLeftWidth`	Facultatif `number \| undefined` Largeur de la bordure.
`borderRadius`	Facultatif `("none" \| "xsmall" \| "small" \| "medium" \| "large" \| "rounded") \| undefined`
`borderRightColor`	Facultatif `("neutral" \| "critical") \| undefined`
`borderRightStyle`	Facultatif `("dashed" \| "dotted" \| "double" \| "groove" \| "hidden" \| "inherit" \| "initial" \| "inset" \| "none" \| "outset" \| "revert-layer" \| "revert" \| "ridge" \| "solid" \| "unset") \| undefined`
`borderRightWidth`	Facultatif `number \| undefined` Largeur de la bordure.
`borderStyle`	Facultatif `("dashed" \| "dotted" \| "double" \| "groove" \| "hidden" \| "inherit" \| "initial" \| "inset" \| "none" \| "outset" \| "revert-layer" \| "revert" \| "ridge" \| "solid" \| "unset") \| undefined`
`borderTopColor`	Facultatif `("neutral" \| "critical") \| undefined`
`borderTopLeftRadius`	Facultatif `("none" \| "xsmall" \| "small" \| "medium" \| "large" \| "rounded") \| undefined`
`borderTopRightRadius`	Facultatif `("none" \| "xsmall" \| "small" \| "medium" \| "large" \| "rounded") \| undefined`
`borderTopStyle`	Facultatif `("dashed" \| "dotted" \| "double" \| "groove" \| "hidden" \| "inherit" \| "initial" \| "inset" \| "none" \| "outset" \| "revert-layer" \| "revert" \| "ridge" \| "solid" \| "unset") \| undefined`
`borderTopWidth`	Facultatif `number \| undefined` Largeur de la bordure.
`borderWidth`	Facultatif `number \| undefined` Largeur de la bordure.
`bottom`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`boxShadow`	Facultatif `("none" \| "base" \| "top" \| "hover" \| "focus") \| undefined`
`color`	Facultatif `("brand" \| "primary" \| "secondary" \| "disabled" \| "info" \| "success" \| "attention" \| "critical") \| undefined`
`columnGap`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`display`	Facultatif `"grid" \| undefined`
`distribute`	Facultatif `("packed" \| "space-between") \| undefined`
`fill`	Facultatif `("brand" \| "primary" \| "secondary" \| "disabled" \| "info" \| "success" \| "attention" \| "critical") \| undefined`
`focusRing`	Facultatif `("none" \| "base" \| "top" \| "hover" \| "focus") \| undefined`
`font`	Facultatif `("body" \| "bodyEmphasized" \| "caption" \| "heading" \| "kicker" \| "lead" \| "subheading" \| "subtitle" \| "title") \| undefined`
`fontFamily`	Facultatif `("monospace" \| "ui") \| undefined`
`fontWeight`	Facultatif `("regular" \| "semibold" \| "bold") \| undefined`
`gap`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`gapX`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`gapY`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`gridColumns`	Facultatif `number \| undefined`
`height`	Facultatif `(number \| "auto" \| "fill" \| "min" \| "max" \| "fit" \| "1/2" \| "1/3" \| "2/3" \| "1/4" \| "2/4" \| "3/4" \| "1/5" \| "2/5" \| "3/5" \| "4/5" \| "1/6" \| "2/6" \| "3/6" \| "4/6" \| "5/6" \| "1/12" \| "2/12" \| "3/12" \| "4/12" \| "5/12" \| "6/12" \| "7/12" \| "8/12" \| "9/12" \| "10/12" \| "11/12") \| undefined` Hauteur du composant. Pour en savoir plus, consultez la section Dimensions.
`inset`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`keyline`	Facultatif `("neutral" \| "critical") \| undefined`
`left`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`margin`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`marginBottom`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`marginLeft`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`marginRight`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`marginTop`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`marginX`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`marginY`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`maxHeight`	Facultatif `(number \| "auto" \| "fill" \| "min" \| "max" \| "fit" \| "1/2" \| "1/3" \| "2/3" \| "1/4" \| "2/4" \| "3/4" \| "1/5" \| "2/5" \| "3/5" \| "4/5" \| "1/6" \| "2/6" \| "3/6" \| "4/6" \| "5/6" \| "1/12" \| "2/12" \| "3/12" \| "4/12" \| "5/12" \| "6/12" \| "7/12" \| "8/12" \| "9/12" \| "10/12" \| "11/12") \| undefined` Hauteur du composant. Pour en savoir plus, consultez la section Dimensions.
`maxWidth`	Facultatif `(number \| "auto" \| "fill" \| "min" \| "max" \| "fit" \| "1/2" \| "1/3" \| "2/3" \| "1/4" \| "2/4" \| "3/4" \| "1/5" \| "2/5" \| "3/5" \| "4/5" \| "1/6" \| "2/6" \| "3/6" \| "4/6" \| "5/6" \| "1/12" \| "2/12" \| "3/12" \| "4/12" \| "5/12" \| "6/12" \| "7/12" \| "8/12" \| "9/12" \| "10/12" \| "11/12") \| undefined` Largeur du composant. Pour en savoir plus, consultez la section Dimensions.
`minHeight`	Facultatif `(number \| "auto" \| "fill" \| "min" \| "max" \| "fit" \| "1/2" \| "1/3" \| "2/3" \| "1/4" \| "2/4" \| "3/4" \| "1/5" \| "2/5" \| "3/5" \| "4/5" \| "1/6" \| "2/6" \| "3/6" \| "4/6" \| "5/6" \| "1/12" \| "2/12" \| "3/12" \| "4/12" \| "5/12" \| "6/12" \| "7/12" \| "8/12" \| "9/12" \| "10/12" \| "11/12") \| undefined` Hauteur du composant. Pour en savoir plus, consultez la section Dimensions.
`minTileWidth`	Facultatif `(number \| "1/2" \| "1/3" \| "2/3" \| "1/4" \| "2/4" \| "3/4" \| "1/5" \| "2/5" \| "3/5" \| "4/5" \| "1/6" \| "2/6" \| "3/6" \| "4/6" \| "5/6" \| "1/12" \| "2/12" \| "3/12" \| "4/12" \| "5/12" \| "6/12" \| "7/12" \| "8/12" \| "9/12" \| "10/12" \| "11/12") \| undefined`
`minWidth`	Facultatif `(number \| "auto" \| "fill" \| "min" \| "max" \| "fit" \| "1/2" \| "1/3" \| "2/3" \| "1/4" \| "2/4" \| "3/4" \| "1/5" \| "2/5" \| "3/5" \| "4/5" \| "1/6" \| "2/6" \| "3/6" \| "4/6" \| "5/6" \| "1/12" \| "2/12" \| "3/12" \| "4/12" \| "5/12" \| "6/12" \| "7/12" \| "8/12" \| "9/12" \| "10/12" \| "11/12") \| undefined` Largeur du composant. Pour en savoir plus, consultez la section Dimensions.
`overflow`	Facultatif `("visible" \| "hidden" \| "clip" \| "scroll" \| "auto") \| undefined`
`overflowWrap`	Facultatif `("break-word" \| "normal") \| undefined`
`overflowX`	Facultatif `("visible" \| "hidden" \| "clip" \| "scroll" \| "auto") \| undefined`
`overflowY`	Facultatif `("visible" \| "hidden" \| "clip" \| "scroll" \| "auto") \| undefined`
`padding`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`paddingBottom`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`paddingLeft`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`paddingRight`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`paddingTop`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`paddingX`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`paddingY`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`rowGap`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`stack`	Facultatif `("x" \| "y" \| "z") \| undefined`
`textAlign`	Facultatif `("center" \| "end" \| "justify" \| "left" \| "match-parent" \| "right" \| "start") \| undefined`
`textOverflow`	Facultatif `"ellipsis" \| undefined`
`textTransform`	Facultatif `("capitalize" \| "uppercase" \| "lowercase" \| "none" \| "full-width" \| "full-size-kana") \| undefined`
`top`	Facultatif `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`topShadow`	Facultatif `("none" \| "base" \| "top" \| "hover" \| "focus") \| undefined`
`whiteSpace`	Facultatif `("normal" \| "nowrap" \| "pre" \| "pre-wrap" \| "pre-line" \| "break-spaces") \| undefined`
`width`	Facultatif `(number \| "auto" \| "fill" \| "min" \| "max" \| "fit" \| "1/2" \| "1/3" \| "2/3" \| "1/4" \| "2/4" \| "3/4" \| "1/5" \| "2/5" \| "3/5" \| "4/5" \| "1/6" \| "2/6" \| "3/6" \| "4/6" \| "5/6" \| "1/12" \| "2/12" \| "3/12" \| "4/12" \| "5/12" \| "6/12" \| "7/12" \| "8/12" \| "9/12" \| "10/12" \| "11/12") \| undefined` Largeur du composant. Pour en savoir plus, consultez la section Dimensions.
`wordBreak`	Facultatif `("normal" \| "break-all" \| "keep-all" \| "break-word") \| undefined`
`wordWrap`	Facultatif `("break-word" \| "normal") \| undefined`
`wrap`	Facultatif `("wrap" \| "nowrap" \| "wrap-reverse") \| undefined`
`zIndex`	Facultatif `("overlay" \| "partial") \| undefined`
`background`	FacultatifObsolète Utilisez plutôt la propriété `backgroundColor`. `("container" \| "surface") \| undefined`
`isolatedDependencies`	FacultatifObsolète `string[] \| undefined`
`layout`	FacultatifObsolète Utilisez plutôt la propriété `stack`. `("column" \| "inline" \| "row" \| "inline-column" \| "inline-row") \| undefined`
`when`	FacultatifObsolète Utilisez plutôt des styles imbriqués. `(string \| { pointer: "none" \| "coarse" \| "fine"; colorScheme: "dark" \| "light"; motion: "supported" \| "reduced"; hover: "none" \| "hover"; viewportWidth: "small" \| "medium" \| "large" \| "xlarge"; contrast: "more" \| "less"; }[] \| { pointer: "none" \| "coarse" \| "fine"; colorScheme: "dark" \| "light"; motion: "supported" \| "reduced"; hover: "none" \| "hover"; viewportWidth: "small" \| "medium" \| "large" \| "xlarge"; contrast: "more" \| "less"; }) \| undefined`

Imbrication de boîtes

Vous pouvez utiliser une boîte pour gérer la mise en page et l’espacement des enfants de certains composants. Par exemple, imbriquez une boîte dans un composant AccordionItem pour ajouter des marges intérieures :

Chargement de l'exemple...

<Box css={{backgroundColor: 'surface'}}>
  <Accordion>
    <AccordionItem title="Apples">
      <Box css={{padding: 'xlarge'}}>Accordion contents</Box>
    </AccordionItem>
    <AccordionItem title="Bananas">
      <Box css={{padding: 'xlarge'}}>Accordion contents</Box>
    </AccordionItem>
    <AccordionItem title="Peaches" subtitle="A subtitle can be provided">
      <Box css={{padding: 'xlarge'}}>Accordion contents</Box>
    </AccordionItem>
  </Accordion>
</Box>

Composant de case pour les applications Stripe

Utilisez les composants Box pour envelopper les autres composants et ajouter des styles et mises en page personnalisés.

Propriétés des boîtes

CSS

Imbrication de boîtes

Voir aussi