Stripe Apps の Link コンポーネント

リンクは、ユーザーをあるページから別のページに移動させるために使用され、また、ボタンと比較してより細かさを必要とするアクションに使用されます。

SDK バージョン

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

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

Stripe 製品では、1 次と 2 次の 2 つのタイプのリンクを使用できます。

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

<Link href="https://www.stripe.com">Primary link</Link>
<Link type="secondary" href="https://www.stripe.com">
  Secondary link
</Link>

Link props

プロパティー	タイプ
`children`	必須 `React.ReactNode` コンポーネントのコンテンツ。
`css`	オプション `CSS \| undefined` Related types: CSS.
`disabled`	オプション `boolean \| undefined` アクションが無効化されているかどうか。
`external`	オプション `boolean \| undefined` Whether linking out to an external resource.
`href`	オプション `string \| undefined` ネイティブの `href` 属性。
`onPress`	オプション `((event: PressEvent) => void) \| undefined` ターゲット上で押したときに呼び出されるハンドラ。
`rel`	オプション `string \| undefined` Native `rel` attribute.
`tabIndex`	オプション `number \| undefined` Overrides the default tab key behavior. Avoid using values other than `-1` and `0`.
`target`	オプション `("_self" \| "_blank" \| "_top" \| "_parent") \| undefined` Where to display the linked URL, as the name for a browsing context.
`type`	オプション `("primary" \| "secondary") \| undefined` The type of the `Link`.
`className`	オプション非推奨 `string \| undefined`

CSS

プロパティータイプ

プロパティー	タイプ
`alignX`	オプション `("start" \| "center" \| "end" \| "stretch") \| undefined` Horizontal alignment. See Layout properties for details.
`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.

alignX

オプション

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

Horizontal alignment. See Layout properties for details.

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.

1 次リンク

1 次スタイルは、リンクのデフォルトです。外部リソースやアプリケーション内の他のページにリンクする際に常に使用されます。

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

<Link href="https://www.stripe.com">Primary link</Link>
<Link external href="https://www.example.com">
  External primary link
</Link>

2 次リンク

2 次リンクは、以下の状況で使用します。

リンクが近くにある 1 次ボタンまたは 1 次リンクと衝突する場合
それぞれがリンクである多数のアイテムが 1 ページに表示される場合。1 ページに多数の 1 次リンクが表示されると混乱しやすくなります。このような状況では 2 次リンクを使用してください。
Customer、Payment、Product などのオブジェクトをリンクする場合。UI でこれらのオブジェクトが参照されるすべての場所でリンクを設定する必要があります。1 ページで多数のオブジェクトがリンクされる可能性があるため、2 次スタイルを使用して視覚的混乱を招かないようにします。

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

<Link type="secondary" href="https://www.stripe.com">
  Secondary link
</Link>

無効化されたリンク

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

<Link disabled href="https://www.stripe.com">
  Primary link
</Link>
<Link disabled type="secondary" href="https://www.stripe.com">
  Secondary link
</Link>

新しいタブでリンクを開く

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

<Link href="https://stripe.com" target="_blank">
  Open link in new tab
</Link>

指定できる href 値

href 属性は、相対URL と http または https の URL に対応しています。その他の値は、実行時にサニタイズされます。

注

Stripe Apps の Link コンポーネント

リンクは、ユーザーをあるページから別のページに移動させるために使用され、また、ボタンと比較してより細かさを必要とするアクションに使用されます。

Link props

CSS

1 次リンク

2 次リンク

無効化されたリンク

新しいタブでリンクを開く

指定できる href 値

参照情報