コンテンツにスキップ
アカウントを作成
または
サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成
サインイン
概要
バージョン管理
API バージョンのアップグレード
開発者向けのツール
LLM を使用した構築Visual Studio Code をご利用の場合Stripe 健全性アラートファイルのアップロード
Security and privacy
Stripe を拡張する
Stripe Apps
パートナー
パートナー認定

注

このページはまだ日本語ではご利用いただけません。より多くの言語で文書が閲覧できるように現在取り組んでいます。準備が整い次第、翻訳版を提供いたしますので、もう少しお待ちください。

Stripe Apps の Inline コンポーネント

インラインコンポーネントは、テキストなどのインラインコンテンツのスタイリングに使用します。

ページをコピー

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

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

Inline components are styleable inline elements, equivalent to a span in HTML. They support custom styles. If you’d like to render or style block-level elements, see the Box component.

サンプルを読み込み中...
<Inline
  css={{
    font: 'body',
    fontWeight: 'semibold',
    color: 'success',
    marginY: 'large',
  }}
>
  This is an example of the inline component.
</Inline>

Inline props

プロパティータイプ

children

必須

React.ReactNode

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

css

オプション

CSS | undefined

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

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

The width of the border.

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

The width of the border.

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

The width of the border.

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

The width of the border.

borderWidth

オプション

number | undefined

The width of the border.

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

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

強調テキスト

サンプルを読み込み中...
<Inline css={{font: 'body', color: 'primary', fontWeight: 'semibold'}}>
  This text is emphasized
</Inline>

二次テキスト

サンプルを読み込み中...
<Inline css={{font: 'caption', color: 'secondary'}}>
  This text is styled using the caption text style and the secondary color.
</Inline>

参照情報

このページはお役に立ちましたか。
はいいいえ
お困りのことがございましたら 、サポートにお問い合わせください。
早期アクセスプログラムにご参加ください。
変更ログをご覧ください。
ご不明な点がございましたら、お問い合わせください。
LLM ですか？llms.txt を読んでください。
Powered by Markdoc