ContextView
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.html
d’un site web).
Apparence d’une ContextView
Note
Pour créer une vue dans une ContextView
existante, consultez la page 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. |
Exemple
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> );