Stripe Apps の Box コンポーネント

ボックスは、他のコンポーネントをラップして、カスタムのスタイルやレイアウトを追加するために使用します。

SDK バージョン

Box コンポーネントをアプリに追加するには、以下のようにします。

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

ボックスはブロックレベルのエレメントで、div HTML エレメントに相当します。カスタムスタイルをサポートしています。インラインエレメントを表示またはスタイリングする場合は、Inline コンポーネントをご覧ください。

サンプルを読み込み中...

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

Box プロパティ

プロパティータイプ

プロパティー	タイプ
`children`	必須 `React.ReactNode` コンポーネントのコンテンツ。
`css`	オプション `CSS \| undefined` 関連タイプ: CSS。

children

必須

React.ReactNode

コンポーネントのコンテンツ。

css

オプション

CSS | undefined

CSS

プロパティー	タイプ
`alignSelfX`	オプション `("start" \| "center" \| "end" \| "stretch") \| undefined` 水平方向の配置。詳細については、レイアウトのプロパティをご覧ください。
`alignSelfY`	オプション `("top" \| "center" \| "baseline" \| "bottom" \| "stretch") \| undefined` 垂直方向の配置。詳細については、レイアウトのプロパティをご覧ください。
`alignX`	オプション `("start" \| "center" \| "end" \| "stretch") \| undefined` 水平方向の配置。詳細については、レイアウトのプロパティをご覧ください。
`alignY`	オプション `("top" \| "center" \| "baseline" \| "bottom" \| "stretch") \| undefined` 垂直方向の配置。詳細については、レイアウトのプロパティをご覧ください。
`backgroundColor`	オプション `("container" \| "surface") \| undefined`
`bleed`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`bleedBottom`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`bleedLeft`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`bleedRight`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`bleedTop`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`bleedX`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`bleedY`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`borderBottomColor`	オプション `("neutral" \| "critical") \| undefined`
`borderBottomLeftRadius`	オプション `("none" \| "xsmall" \| "small" \| "medium" \| "large" \| "rounded") \| undefined`
`borderBottomRightRadius`	オプション `("none" \| "xsmall" \| "small" \| "medium" \| "large" \| "rounded") \| undefined`
`borderBottomStyle`	オプション `("dashed" \| "dotted" \| "double" \| "groove" \| "hidden" \| "inherit" \| "initial" \| "inset" \| "none" \| "outset" \| "revert-layer" \| "revert" \| "ridge" \| "solid" \| "unset") \| undefined`
`borderBottomWidth`	オプション `number \| undefined` 枠線の幅。
`borderColor`	オプション `("neutral" \| "critical") \| undefined`
`borderLeftColor`	オプション `("neutral" \| "critical") \| undefined`
`borderLeftStyle`	オプション `("dashed" \| "dotted" \| "double" \| "groove" \| "hidden" \| "inherit" \| "initial" \| "inset" \| "none" \| "outset" \| "revert-layer" \| "revert" \| "ridge" \| "solid" \| "unset") \| undefined`
`borderLeftWidth`	オプション `number \| undefined` 枠線の幅。
`borderRadius`	オプション `("none" \| "xsmall" \| "small" \| "medium" \| "large" \| "rounded") \| undefined`
`borderRightColor`	オプション `("neutral" \| "critical") \| undefined`
`borderRightStyle`	オプション `("dashed" \| "dotted" \| "double" \| "groove" \| "hidden" \| "inherit" \| "initial" \| "inset" \| "none" \| "outset" \| "revert-layer" \| "revert" \| "ridge" \| "solid" \| "unset") \| undefined`
`borderRightWidth`	オプション `number \| undefined` 枠線の幅。
`borderStyle`	オプション `("dashed" \| "dotted" \| "double" \| "groove" \| "hidden" \| "inherit" \| "initial" \| "inset" \| "none" \| "outset" \| "revert-layer" \| "revert" \| "ridge" \| "solid" \| "unset") \| undefined`
`borderTopColor`	オプション `("neutral" \| "critical") \| undefined`
`borderTopLeftRadius`	オプション `("none" \| "xsmall" \| "small" \| "medium" \| "large" \| "rounded") \| undefined`
`borderTopRightRadius`	オプション `("none" \| "xsmall" \| "small" \| "medium" \| "large" \| "rounded") \| undefined`
`borderTopStyle`	オプション `("dashed" \| "dotted" \| "double" \| "groove" \| "hidden" \| "inherit" \| "initial" \| "inset" \| "none" \| "outset" \| "revert-layer" \| "revert" \| "ridge" \| "solid" \| "unset") \| undefined`
`borderTopWidth`	オプション `number \| undefined` 枠線の幅。
`borderWidth`	オプション `number \| undefined` 枠線の幅。
`bottom`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`boxShadow`	オプション `("none" \| "base" \| "top" \| "hover" \| "focus") \| undefined`
`color`	オプション `("brand" \| "primary" \| "secondary" \| "disabled" \| "info" \| "success" \| "attention" \| "critical") \| undefined`
`columnGap`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`display`	オプション `"grid" \| undefined`
`distribute`	オプション `("packed" \| "space-between") \| undefined`
`fill`	オプション `("brand" \| "primary" \| "secondary" \| "disabled" \| "info" \| "success" \| "attention" \| "critical") \| undefined`
`focusRing`	オプション `("none" \| "base" \| "top" \| "hover" \| "focus") \| undefined`
`font`	オプション `("body" \| "bodyEmphasized" \| "caption" \| "heading" \| "kicker" \| "lead" \| "subheading" \| "subtitle" \| "title") \| undefined`
`fontFamily`	オプション `("monospace" \| "ui") \| undefined`
`fontWeight`	オプション `("regular" \| "semibold" \| "bold") \| undefined`
`gap`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`gapX`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`gapY`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`gridColumns`	オプション `number \| undefined`
`height`	オプション `(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` コンポーネントの高さ。詳細については、サイズ指定をご覧ください。
`inset`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`keyline`	オプション `("neutral" \| "critical") \| undefined`
`left`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`margin`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`marginBottom`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`marginLeft`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`marginRight`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`marginTop`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`marginX`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`marginY`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`maxHeight`	オプション `(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` コンポーネントの高さ。詳細については、サイズ指定をご覧ください。
`maxWidth`	オプション `(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` コンポーネントの幅。詳細については、サイズ指定をご覧ください。
`minHeight`	オプション `(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` コンポーネントの高さ。詳細については、サイズ指定をご覧ください。
`minTileWidth`	オプション `(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`	オプション `(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` コンポーネントの幅。詳細については、サイズ指定をご覧ください。
`overflow`	オプション `("visible" \| "hidden" \| "clip" \| "scroll" \| "auto") \| undefined`
`overflowWrap`	オプション `("break-word" \| "normal") \| undefined`
`overflowX`	オプション `("visible" \| "hidden" \| "clip" \| "scroll" \| "auto") \| undefined`
`overflowY`	オプション `("visible" \| "hidden" \| "clip" \| "scroll" \| "auto") \| undefined`
`padding`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`paddingBottom`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`paddingLeft`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`paddingRight`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`paddingTop`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`paddingX`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`paddingY`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`rowGap`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`stack`	オプション `("x" \| "y" \| "z") \| undefined`
`textAlign`	オプション `("center" \| "end" \| "justify" \| "left" \| "match-parent" \| "right" \| "start") \| undefined`
`textOverflow`	オプション `"ellipsis" \| undefined`
`textTransform`	オプション `("capitalize" \| "uppercase" \| "lowercase" \| "none" \| "full-width" \| "full-size-kana") \| undefined`
`top`	オプション `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`topShadow`	オプション `("none" \| "base" \| "top" \| "hover" \| "focus") \| undefined`
`whiteSpace`	オプション `("normal" \| "nowrap" \| "pre" \| "pre-wrap" \| "pre-line" \| "break-spaces") \| undefined`
`width`	オプション `(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` コンポーネントの幅。詳細については、サイズ指定をご覧ください。
`wordBreak`	オプション `("normal" \| "break-all" \| "keep-all" \| "break-word") \| undefined`
`wordWrap`	オプション `("break-word" \| "normal") \| undefined`
`wrap`	オプション `("wrap" \| "nowrap" \| "wrap-reverse") \| undefined`
`zIndex`	オプション `("overlay" \| "partial") \| undefined`
`background`	オプション非推奨代わりに `backgroundColor` プロパティを使用してください。 `("container" \| "surface") \| undefined`
`isolatedDependencies`	オプション非推奨 `string[] \| undefined`
`layout`	オプション非推奨代わりに `stack` プロパティを使用してください。 `("column" \| "inline" \| "row" \| "inline-column" \| "inline-row") \| undefined`
`when`	オプション非推奨代わりに、ネストされたスタイルを使用します。 `(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`

ボックスをネストする

一部のコンポーネントでは、ボックスを使用して、子のレイアウトと間隔を管理できます。たとえば、AccordionItem の内部にボックスをネストしてパディングを追加します。

サンプルを読み込み中...

<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>

Stripe Apps の Box コンポーネント

ボックスは、他のコンポーネントをラップして、カスタムのスタイルやレイアウトを追加するために使用します。

Box プロパティ

CSS

ボックスをネストする

参照情報