Composant box
Utilisez les composants Box pour envelopper les autres composants et ajouter des styles et mises en page personnalisés.
Pour ajouter le composant Box
à votre application :
import {Box} from '@stripe/ui-extension-sdk/ui';
Les composants boîtes sont des éléments de niveau bloc équivalents à un élément HTML div
. Ils 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
<Box css={{ padding: 'xxlarge', color: 'secondary', background: 'container', borderRadius: 'small', }} > This is a box. </Box>
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 :
<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>
Ou alors, imbriquez une boîte dans un composant Button afin d’organiser la mise en page d’un libellé et d’une icône :
<Button> <Icon name="mobile" size="xsmall" /> <Inline>New messages</Inline> </Button> <Badge type="positive"> <Icon name="mobile" size="xsmall" /> New messages </Badge>