コンテンツにスキップ
アカウントを作成
または
サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成
サインイン
概要
バージョン管理
API バージョンのアップグレード
開発者向けのツール
Visual Studio Code をご利用の場合ファイルのアップロードフィードバック
セキュリティ
Extend Stripe
Stripe Apps
パートナー
Partner Ecosystemパートナー認定

ボックス

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

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

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

Boxes are block-level elements, equivalent to a div HTML element. They support custom styles. If you want to render or style inline elements, see the Inline component.

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

Box props

プロパティータイプ

children

必須

React.ReactNode

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

css

オプション

Object

Related types: CSS.

CSS

プロパティータイプ

alignSelfX

オプション

("start" | "center" | "end" | "stretch") | undefined

Horizontal alignment. See Layout properties for details.

alignSelfY

オプション

("top" | "center" | "baseline" | "bottom" | "stretch") | undefined

Vertical alignment. See Layout properties for details.

alignX

オプション

("start" | "center" | "end" | "stretch") | undefined

Horizontal alignment. See Layout properties for details.

alignY

オプション

("top" | "center" | "baseline" | "bottom" | "stretch") | undefined

Vertical alignment. See Layout properties for details.

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

borderBottomLeftRadius

オプション

("none" | "xsmall" | "small" | "medium" | "large" | "rounded") | undefined

borderBottomRightRadius

オプション

("none" | "xsmall" | "small" | "medium" | "large" | "rounded") | undefined

borderRadius

オプション

("none" | "xsmall" | "small" | "medium" | "large" | "rounded") | undefined

borderTopLeftRadius

オプション

("none" | "xsmall" | "small" | "medium" | "large" | "rounded") | undefined

borderTopRightRadius

オプション

("none" | "xsmall" | "small" | "medium" | "large" | "rounded") | 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

The height of the component. See Sizing for details.

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

The height of the component. See Sizing for details.

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

The width of the component. See Sizing for details.

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

The height of the component. See Sizing for details.

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

The width of the component. See Sizing for details.

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

The width of the component. See Sizing for details.

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

オプションDeprecated

Use the backgroundColor property instead.

("container" | "surface") | undefined

borderBottomColor

オプションDeprecated

Use the keyline property instead.

("neutral" | "critical") | undefined

borderColor

オプションDeprecated

Use the keyline property instead.

("neutral" | "critical") | undefined

borderLeftColor

オプションDeprecated

Use the keyline property instead.

("neutral" | "critical") | undefined

borderRightColor

オプションDeprecated

Use the keyline property instead.

("neutral" | "critical") | undefined

borderTopColor

オプションDeprecated

Use the keyline property instead.

("neutral" | "critical") | undefined

isolatedDependencies

オプションDeprecated

string[] | undefined

layout

オプションDeprecated

Use the stack property instead.

("column" | "inline" | "row" | "inline-column" | "inline-row") | undefined

when

オプションDeprecated

Use nested styles instead.

(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

ボックスをネストする

For some components, you can use a Box to manage the layout and spacing of their children. For example, nest a Box inside an AccordionItem to add padding:

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

参照情報

このページはお役に立ちましたか。
はいいいえ
お困りのことがございましたら 、サポートにお問い合わせください。
早期アクセスプログラムにご参加ください。
Stripe の製品変更ログを確認してください。
ご不明な点がございましたら、お問い合わせください。
Powered by Markdoc