リンク
リンクは、ユーザーをあるページから別のページに移動させるために使用され、また、ボタンと比較してより細かさを必要とするアクションに使用されます。
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>
Props
Prop | Type | Description |
---|---|---|
className |
| The css class name |
disabled |
| Whether the action is disabled. |
external |
| Whether linking out to an external resource |
href |
| Native `href` attribute |
onPress |
| Handler that is called when the press is released over the target. |
rel |
| |
tabIndex |
| |
target |
| The anchor target |
type |
| The type of the link |
1 次リンク
1 次スタイルは、リンクのデフォルトです。外部リソースやアプリケーション内の他のページにリンクする際に常に使用されます。
<Link href="https://www.stripe.com">Primary link</Link> <Link href="https://www.example.com" external>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 type="secondary" href="https://www.stripe.com" disabled>Secondary link</Link>
新しいタブでリンクを開く
<Link href="https://stripe.com" target="_blank"> Open link in new tab </Link>
指定できる href 値
href 属性は、相対URL と http または https の URL に対応しています。その他の値は、実行時にサニタイズされます。