ContextView
Mit ContextView können Apps direkt neben Stripe-Inhalten in einer Schublade gerendert werden. So können die Nutzer/innen beides nebeneinander sehen und den Kontext teilen.
Die Stammansicht Ihrer App muss ContextView
sein.
Mit diesen kontextbezogenen Modulen kann die App die Nutzer/innen in ihren bestehenden Abläufen unterstützen und kontextbezogene Informationen und Aktionen bereitstellen.
Die Interaktion der Nutzer/innen mit einer App beginnt immer mit einem als ContextView
-Ansicht bezeichneten Ansichtstyp. Jede App muss über eine einzige ContextView
-Ansicht (pro Darstellungsfeld) verfügen, die beim Laden der Seite als Standardansicht fungiert (ähnlich wie index.html
auf einer Website).
Darstellung der ContextView
Notiz
Informationen zum Erstellen von Ansichten innerhalb einer bestehenden ContextView
finden Sie unter 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. |
Beispiel
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> );