# Composant ContextView pour les applications Stripe La vue ContextView permet d'afficher des applications à côté du contenu de Stripe dans un volet, afin que les utilisateurs puissent les consulter côte à côte et partager la fenêtre contextuelle. # 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. La vue racine de votre application doit être une `ContextView`. Ces modules en contexte permettent à l’application de rencontrer les utilisateurs dans leurs flux existants et de leur fournir des informations et des actions contextuelles. L’interaction d’un utilisateur avec une application commence toujours par un type de vue appelé `ContextView`. Chaque application doit avoir une seule vue `ContextView` (par [fenêtre d’affichage](https://docs.stripe.com/stripe-apps/reference/viewports.md)), qui fait office de vue par défaut au chargement de la page (similaire à la page `index.html` d’un site web). ![ContextView dans une application](https://b.stripecdn.com/docs-statics-srv/assets/contextview-2.b7a229ed709708c7e83e700396b82327.png) Apparence d’une ContextView > Pour créer une vue dans une `ContextView` existante, consultez la page [FocusView](https://docs.stripe.com/stripe-apps/components/focusview.md). ### Propriétés ContextView | Propriété | Type | | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Obligatoire) `React.ReactNode` Contenu du composant. | | `title` | (Obligatoire) `string` Le titre de la `ContextView`. Il sera affiché en haut du volet sous le nom de cette application. | | `actions` | (Facultatif) `React.ReactNode` Un fragment React contenant jusqu’à trois `Buttons` qui seront affichés directement sous l’en-tête et au-dessus des enfants de la `ContextView`. | | `banner` | (Facultatif) `React.ReactElement | undefined` Un composant `Banner` qui sera affiché directement sous l’en-tête et au-dessus des enfants de la `ContextView`. | | `brandColor` | (Facultatif) `string | undefined` Couleur CSS qui contraste bien avec `brandIcon`. | | `brandIcon` | (Facultatif) `string | undefined` Image SVG monochrome carrée qui contraste bien avec `brandColor`. | | `description` | (Facultatif) `string | undefined` Une description de l’objectif de la vue peut également être utilisée comme sous-titre. | | `externalLink` | (Facultatif) `ExternalLink | undefined` Un lien vers une page web externe. Cela doit généralement permettre à l’utilisateur de consulter des informations connexes sur un autre site avec plus de contexte que ce que l’application met à disposition dans le volet des applications. Types associés : [ExternalLink](https://docs.stripe.com/stripe-apps/components/contextview.md#externallink). | | `footerContent` | (Facultatif) `React.ReactNode` Node React adjacent à toute action dans le pied de page. | | `primaryAction` | (Facultatif) `React.ReactElement | undefined` Un `Button` d’appel à l’action principal (« Enregistrer » ou « Continuer ») placé dans le pied de page. | | `secondaryAction` | (Facultatif) `React.ReactElement | undefined` Un `Button` d’appel à l’action secondaire (« Annuler ») placé dans le pied de page. | ### ExternalLink | Propriété | Type | | --------- | ------------------------------------------------------ | | `href` | (Obligatoire) `string` URL d’un lien externe. | | `label` | (Obligatoire) `string` Libellé d’un lien externe. | ## Exemple # 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. La vue racine de votre application doit être une `ContextView`. Ces modules en contexte permettent à l’application de rencontrer les utilisateurs dans leurs flux existants et de leur fournir des informations et des actions contextuelles. L’interaction d’un utilisateur avec une application commence toujours par un type de vue appelé `ContextView`. Chaque application doit avoir une seule vue `ContextView` (par [fenêtre d’affichage](https://docs.stripe.com/stripe-apps/reference/viewports.md)), qui fait office de vue par défaut au chargement de la page (similaire à la page `index.html` d’un site web). ![ContextView dans une application](https://b.stripecdn.com/docs-statics-srv/assets/contextview-2.b7a229ed709708c7e83e700396b82327.png) Apparence d’une ContextView > Pour créer une vue dans une `ContextView` existante, consultez la page [FocusView](https://docs.stripe.com/stripe-apps/components/focusview.md). ### Propriétés ContextView | Propriété | Type | | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Obligatoire) `React.ReactNode` Contenu du composant. | | `title` | (Obligatoire) `string` Le titre de la `ContextView`. Il sera affiché en haut du volet sous le nom de cette application. | | `actions` | (Facultatif) `React.ReactNode` Un fragment React contenant jusqu’à trois `Buttons` qui seront affichés directement sous l’en-tête et au-dessus des enfants de la `ContextView`. | | `banner` | (Facultatif) `React.ReactElement | undefined` Un composant `Banner` qui sera affiché directement sous l’en-tête et au-dessus des enfants de la `ContextView`. | | `brandColor` | (Facultatif) `string | undefined` Couleur CSS qui contraste bien avec `brandIcon`. | | `brandIcon` | (Facultatif) `string | undefined` Image SVG monochrome carrée qui contraste bien avec `brandColor`. | | `description` | (Facultatif) `string | undefined` Une description de l’objectif de la vue peut également être utilisée comme sous-titre. | | `externalLink` | (Facultatif) `ExternalLink | undefined` Un lien vers une page web externe. Cela doit généralement permettre à l’utilisateur de consulter des informations connexes sur un autre site avec plus de contexte que ce que l’application met à disposition dans le volet des applications. Types associés : [ExternalLink](https://docs.stripe.com/stripe-apps/components/contextview.md#externallink). | | `footerContent` | (Facultatif) `React.ReactNode` Node React adjacent à toute action dans le pied de page. | | `primaryAction` | (Facultatif) `React.ReactElement | undefined` Un `Button` d’appel à l’action principal (« Enregistrer » ou « Continuer ») placé dans le pied de page. | | `secondaryAction` | (Facultatif) `React.ReactElement | undefined` Un `Button` d’appel à l’action secondaire (« Annuler ») placé dans le pied de page. | ### ExternalLink | Propriété | Type | | --------- | ------------------------------------------------------ | | `href` | (Obligatoire) `string` URL d’un lien externe. | | `label` | (Obligatoire) `string` Libellé d’un lien externe. | ## Exemple ## See also - [Modèles de conception](https://docs.stripe.com/stripe-apps/patterns.md) - [Styliser votre application](https://docs.stripe.com/stripe-apps/style.md) - [Tests d’interface utilisateur](https://docs.stripe.com/stripe-apps/ui-testing.md)