ContextView-Komponente für Stripe-AppsNur Dashboard
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. auf einer Website).
Darstellung der ContextView
Notiz
Informationen zum Erstellen einer Ansicht innerhalb einer bestehenden ContextView finden Sie unter FocusView.
ContextView-Eigenschaften
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Der Inhalt der Komponente. |
| Pflichtfeld
Der Titel der |
| Optional
Ein React-Fragment mit bis zu drei |
| Optional
Eine |
| Optional
Eine CSS-Farbe, die sich gut von |
| Optional
Ein quadratischer, 1-farbiger SVG, der sich gut von der |
| Optional
Eine Beschreibung des Zwecks der Ansicht, kann auch als Untertitel verwendet werden. |
| Optional
Ein Link zu einer externen Webseite. Dieser sollte es dem Nutzer/der Nutzerin im Allgemeinen ermöglichen, verwandte Informationen auf einer anderen Website mit mehr Kontext anzuzeigen, als die App im App-Drawer zur Verfügung stellt. Verwandte Typen: ExternalLink. |
| Optional
React Node neben allen Aktionen in der Fußzeile. |
| Optional
Eine primäre Aktionsaufruf- |
| Optional
Eine sekundäre Aktionsaufruf- |
Externer Link
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
URL eines externen Links. |
| Pflichtfeld
Label eines externen Links. |
Beispiel
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> );