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 プロパティ

プロパティー	タイプ
`children`	必須 `React.ReactNode` コンポーネントのコンテンツ。
`css`	オプション `CSS \| undefined` 関連タイプ: CSS。
`disabled`	オプション `boolean \| undefined` アクションが無効化されているかどうか。
`external`	オプション `boolean \| undefined` 外部リソースにリンクするかどうか。
`href`	オプション `string \| undefined` ネイティブの `href` 属性。
`onPress`	オプション `((event: PressEvent) => void) \| undefined` ターゲット上で押したときに呼び出されるハンドラ。
`rel`	オプション `string \| undefined` ネイティブの `rel` 属性。
`tabIndex`	オプション `number \| undefined` Tab キーのデフォルト動作を上書きします。`-1` と `0` 以外の値は使用しないでください。
`target`	オプション `("_self" \| "_blank" \| "_top" \| "_parent") \| undefined` 閲覧コンテキストの名前として、リンクされた URL を表示する場所。
`type`	オプション `("primary" \| "secondary") \| undefined` `Link` のタイプ。
`className`	オプション非推奨 `string \| undefined`

CSS

プロパティータイプ

プロパティー	タイプ
`alignX`	オプション `("start" \| "center" \| "end" \| "stretch") \| 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` コンポーネントの幅。詳細については、サイズ指定をご覧ください。

alignX

オプション

("start" | "center" | "end" | "stretch") | 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

コンポーネントの幅。詳細については、サイズ指定をご覧ください。

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 プロパティ

CSS

1 次リンク

2 次リンク

無効化されたリンク

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

指定できる href 値

参照情報