ボックス
ボックスは、他のコンポーネントをラップして、カスタムのスタイルやレイアウトを追加するために使用します。
Box
コンポーネントをアプリに追加するには、以下のようにします。
import {Box} from '@stripe/ui-extension-sdk/ui';
ボックスは、div
HTML エレメントに相当するブロックレベルのエレメントです。カスタムスタイルをサポートしています。インラインエレメントのレンダリングやスタイル設定をご希望の場合は、インラインコンポーネントをご覧ください。
<Box css={{ padding: 'xxlarge', color: 'secondary', background: 'container', borderRadius: 'small', }} > This is a box. </Box>
ボックスをネストする
一部のコンポーネントでは、ボックスを使用して、子のレイアウトと間隔を管理できます。たとえば、AccordionItem の内部にボックスをネストしてパディングを追加します。
<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>
または、ボタンの内部にボックスをネストして、ラベルとアイコンのレイアウトを整理します。
<Button> <Icon name="mobile" size="xsmall" /> <Inline>New messages</Inline> </Button> <Badge type="positive"> <Icon name="mobile" size="xsmall" /> New messages </Badge>