Composant ContextView pour les applications StripeDashboard uniquement
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.
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), qui fait office de vue par défaut au chargement de la page (similaire à la page index. d’un site web).
Apparence d’une ContextView
Remarque
Pour créer une vue dans une ContextView existante, consultez la page FocusView.
Propriétés ContextView
| Propriété | Type |
|---|---|
| Obligatoire
Contenu du composant. |
| Obligatoire
Le titre de la |
| Facultatif
Un fragment React contenant jusqu’à trois |
| Facultatif
Un composant |
| Facultatif
Couleur CSS qui contraste bien avec |
| Facultatif
Image SVG monochrome carrée qui contraste bien avec |
| Facultatif
Une description de l’objectif de la vue peut également être utilisée comme sous-titre. |
| Facultatif
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. |
| Facultatif
Node React adjacent à toute action dans le pied de page. |
| Facultatif
Un |
| Facultatif
Un |
ExternalLink
| Propriété | Type |
|---|---|
| Obligatoire
URL d’un lien externe. |
| Obligatoire
Libellé d’un lien externe. |
Exemple
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> );