# Stripe Apps の ContextView コンポーネント ContextView により、アプリをドロワーで Stripe のコンテンツの横に表示できるため、ユーザーは、それらを横並びで表示し、コンテキストを共有することができます。 # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/contextview?app-sdk-version=8. アプリのルートビューは、`ContextView` にする必要があります。 これらのコンテキスト内のモジュールにより、アプリは既存のワークフローでユーザーと対話して、コンテキストに応じた情報とアクションが提供できます。 アプリとユーザーの対話は常に `ContextView` ビューと呼ばれるビュータイプで開始されます。各アプリには、([ビューポート](https://docs.stripe.com/stripe-apps/reference/viewports.md)ごとに) 1 つの `ContextView` ビューが必要で、ページの読み込み時のデフォルトのビューとして機能します (ウェブサイトの `index.html` に似ています)。 ![アプリケーションの ContextView](https://b.stripecdn.com/docs-statics-srv/assets/contextview-2.b7a229ed709708c7e83e700396b82327.png) ContextView のデザイン > 既存の `ContextView` 内にビューを作成するには、[FocusView](https://docs.stripe.com/stripe-apps/components/focusview.md) をご覧ください。 ### ContextView のプロパティ | プロパティ | 型 | | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (必須) `React.ReactNode` コンポーネントのコンテンツ。 | | `title` | (必須) `string` `ContextView` のタイトル。これは、ドロワーの最上部で、アプリ名の下に表示されます。 | | `actions` | (任意) `React.ReactNode` ヘッダーの真下で、`ContextView` の子の上に表示される、最大 3 つの `Buttons` を含む React フラグメント。 | | `banner` | (任意) `React.ReactElement | undefined` ヘッダーの真下で、`ContextView` の子の上に表示される `Banner` コンポーネント。 | | `brandColor` | (任意) `string | undefined` `brandIcon` と対照的な CSS カラー。 | | `brandIcon` | (任意) `string | undefined` `brandColor` と対照的な、線の端が四角い単色の SVG。 | | `description` | (任意) `string | undefined` ビューの目的の説明。サブタイトルとしても使用できます。 | | `externalLink` | (任意) `ExternalLink | undefined` 外部のウェブページへのリンク。これにより、ユーザーは、アプリドロワーで提供されるアプリの情報よりも多くのコンテキストを使用して、別のサイトの関連情報を表示できるようになります。 関連型: [ExternalLink](https://docs.stripe.com/stripe-apps/components/contextview.md#externallink)。 | | `footerContent` | (任意) `React.ReactNode` フッター内のアクションに横にある React ノード。 | | `primaryAction` | (任意) `React.ReactElement | undefined` フッターに配置される、1 次的な行動喚起 (「保存」または「続行」) の `Button`。 | | `secondaryAction` | (任意) `React.ReactElement | undefined` フッターに配置される、2 次的な行動喚起 (「キャンセル」) の `Button`。 | ### ExternalLink | プロパティ | 型 | | ------- | ------------------------------ | | `href` | (必須) `string` 外部リンクの URL。 | | `label` | (必須) `string` 外部リンクのラベル。 | ## 例 # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/contextview?app-sdk-version=9. アプリのルートビューは、`ContextView` にする必要があります。 これらのコンテキスト内のモジュールにより、アプリは既存のワークフローでユーザーと対話して、コンテキストに応じた情報とアクションが提供できます。 アプリとユーザーの対話は常に `ContextView` ビューと呼ばれるビュータイプで開始されます。各アプリには、([ビューポート](https://docs.stripe.com/stripe-apps/reference/viewports.md)ごとに) 1 つの `ContextView` ビューが必要で、ページの読み込み時のデフォルトのビューとして機能します (ウェブサイトの `index.html` に似ています)。 ![アプリケーションの ContextView](https://b.stripecdn.com/docs-statics-srv/assets/contextview-2.b7a229ed709708c7e83e700396b82327.png) ContextView のデザイン > 既存の `ContextView` 内にビューを作成するには、[FocusView](https://docs.stripe.com/stripe-apps/components/focusview.md) をご覧ください。 ### ContextView のプロパティ | プロパティ | 型 | | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (必須) `React.ReactNode` コンポーネントのコンテンツ。 | | `title` | (必須) `string` `ContextView` のタイトル。これは、ドロワーの最上部で、アプリ名の下に表示されます。 | | `actions` | (任意) `React.ReactNode` ヘッダーの真下で、`ContextView` の子の上に表示される、最大 3 つの `Buttons` を含む React フラグメント。 | | `banner` | (任意) `React.ReactElement | undefined` ヘッダーの真下で、`ContextView` の子の上に表示される `Banner` コンポーネント。 | | `brandColor` | (任意) `string | undefined` `brandIcon` と対照的な CSS カラー。 | | `brandIcon` | (任意) `string | undefined` `brandColor` と対照的な、線の端が四角い単色の SVG。 | | `description` | (任意) `string | undefined` ビューの目的の説明。サブタイトルとしても使用できます。 | | `externalLink` | (任意) `ExternalLink | undefined` 外部のウェブページへのリンク。これにより、ユーザーは、アプリドロワーで提供されるアプリの情報よりも多くのコンテキストを使用して、別のサイトの関連情報を表示できるようになります。 関連型: [ExternalLink](https://docs.stripe.com/stripe-apps/components/contextview.md#externallink)。 | | `footerContent` | (任意) `React.ReactNode` フッター内のアクションに横にある React ノード。 | | `primaryAction` | (任意) `React.ReactElement | undefined` フッターに配置される、1 次的な行動喚起 (「保存」または「続行」) の `Button`。 | | `secondaryAction` | (任意) `React.ReactElement | undefined` フッターに配置される、2 次的な行動喚起 (「キャンセル」) の `Button`。 | ### ExternalLink | プロパティ | 型 | | ------- | ------------------------------ | | `href` | (必須) `string` 外部リンクの URL。 | | `label` | (必須) `string` 外部リンクのラベル。 | ## 例 ## See also - [従うべき設計パターン](https://docs.stripe.com/stripe-apps/patterns.md) - [アプリのスタイル設定](https://docs.stripe.com/stripe-apps/style.md) - [UI テスト](https://docs.stripe.com/stripe-apps/ui-testing.md)