Textfeld
Verwenden Sie Textfelder, um andere Komponenten zu wrappen und nutzerdefinierte Stile und Layouts hinzuzufügen.
So fügen Sie Ihrer App die Box
Komponente hinzu:
import {Box} from '@stripe/ui-extension-sdk/ui';
Textfelder sind Elemente auf Blockebene, vergleichbar mit dem HTML-Element div
. Sie unterstützen individualisiert Anpassung. Wenn Sie Inline-Elemente rendern oder anpassen möchten, sehen Sie sich die Komponente Inline an.
<Box css={{ padding: 'xxlarge', color: 'secondary', background: 'container', borderRadius: 'small', }} > This is a box. </Box>
Verschachtelte Textfelder
Für einige Komponenten können Sie ein Textfeld verwenden, um das Layout und die Abstände der untergeordneten Komponenten zu verwalten. Verschachteln Sie zum Beispiel ein Textfeld innerhalb eines AccordionItem, um Polsterungen hinzuzufügen:
<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>
Oder verschachteln Sie ein Textfeld innerhalb einer Schaltfläche, um das Layout eines Etiketts und eines Symbols zu organisieren:
<Button> <Icon name="mobile" size="xsmall" /> <Inline>New messages</Inline> </Button> <Badge type="positive"> <Icon name="mobile" size="xsmall" /> New messages </Badge>