Stripe Apps の ContextView コンポーネントダッシュボードのみ
ContextView により、アプリをドロワーで Stripe のコンテンツの横に表示できるため、ユーザーは、それらを横並びで表示し、コンテキストを共有することができます。
アプリのルートビューは、ContextView にする必要があります。
これらのコンテキスト内のモジュールにより、アプリは既存のワークフローでユーザーと対話して、コンテキストに応じた情報とアクションが提供できます。
A user’s interaction with an app always begins with a view type called a ContextView view. Each app must have a single ContextView view (per viewport), which acts as the default view when the page loads (similar to the index. of a website).
ContextView のデザイン
注
To create a view within an existing ContextView, see FocusView.
ContextView props
| Property | Type |
|---|---|
| Required
The contents of the component. |
| Required
The title of the |
| Optional
A React fragment containing up to three |
| Optional
A |
| Optional
A CSS color that contrasts well with |
| Optional
A square, 1-color SVG that contrasts well with |
| Optional
A description of the view’s purpose, can also be used as a subtitle. |
| Optional
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. Related types: ExternalLink. |
| Optional
React node adjacent to any actions in the footer. |
| Optional
A primary call to action (“Save” or “Continue”) |
| Optional
A secondary call to action (“Cancel”) |
ExternalLink
| Property | Type |
|---|---|
| Required
URL of an external link. |
| Required
Label of an external link. |
例
import { Box, Button, ContextView, } from '@stripe/ui-extension-sdk/ui'; 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> );