ContextView
ContextView では、アプリをドロワーで Stripe のコンテンツの横に表示できるため、ユーザーは、それらを横並びで表示し、コンテキストを共有することができます。
アプリのルートビューは、ContextView
にする必要があります。
これらのコンテキスト内のモジュールにより、アプリは既存のワークフローでユーザーと対話して、コンテキストに応じた情報とアクションが提供できます。
アプリとのユーザーの対話は常に ContextView
ビューと呼ばれるビュータイプで開始されます。各アプリに (viewport ごとに) 1 つの ContextView
ビューが必要で、ページの読み込み時のデフォルトのビューとして機能します (ウェブサイトの index.html
に似ています)。
ContextView のデザイン
注
既存の ContextView
内にビューを作成するには、FocusView をご覧ください。
Props
Prop | Type | Description |
---|---|---|
title Required |
| The title of the ContextView. This will be displayed at the top
of the drawer under that app's name. |
actions |
| A React fragment containing up to three Buttons that will be displayed
directly under the header and above the children of the ContextView. |
banner |
| A Banner component that will be displayed directly under the header and
above the children of the ContextView. |
brandColor |
| A CSS color that contrasts well with `brandIcon`. |
brandIcon |
| A square, 1-color SVG that contrasts well with `brandColor`. |
children |
| The contents of the ContextView. |
description |
| A description of the view's purpose, can also be used as a subtitle. |
externalLink |
| A link to an external webpage. This should generally allow the user to
view related information on another site with more context than what
the app makes available in the app drawer. |
footerContent |
| React node adjacent to any actions in the footer. |
primaryAction |
| A primary call to action ("Save" or "Continue") button placed in the footer. |
secondaryAction |
| A secondary call to action ("Cancel") button placed in the footer. |
例
import { Box, Button, ContextView, } from '@stripe/ui-extension-sdk'; import appIcon from './icon.svg'; const HappyView = () => ( <ContextView title="Get started with Stripe Apps" actions={ <> <Button>Action 1</Button> <Button>Action 2</Button> </> } brandColor="#635bff" brandIcon={appIcon} > <Box> Example Content </Box> </ContextView> );