# ContextView-Komponente für Stripe-Apps 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. # 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. 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](https://docs.stripe.com/stripe-apps/reference/viewports.md)) verfügen, die beim Laden der Seite als Standardansicht fungiert (ähnlich wie `index.html` auf einer Website). ![ContextView in einer Anwendung](https://b.stripecdn.com/docs-statics-srv/assets/contextview-2.b7a229ed709708c7e83e700396b82327.png) Darstellung der ContextView > Informationen zum Erstellen einer Ansicht innerhalb einer bestehenden `ContextView` finden Sie unter [FocusView](https://docs.stripe.com/stripe-apps/components/focusview.md). ### ContextView-Eigenschaften | Eigenschaft | Typ | | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Pflichtfeld) `React.ReactNode` Der Inhalt der Komponente. | | `title` | (Pflichtfeld) `string` Der Titel der `ContextView`. Dieser wird oben im Drawer unter dem Namen dieser App angezeigt. | | `actions` | (Optional) `React.ReactNode` Ein React-Fragment mit bis zu drei `Buttons`, die direkt unter der Kopfzeile und über den untergeordneten Elementen der `ContextView` angezeigt werden. | | `banner` | (Optional) `React.ReactElement | undefined` Eine `Banner`-Komponente, die direkt unter der Kopfzeile und über den untergeordneten Elementen der `ContextView` angezeigt wird. | | `brandColor` | (Optional) `string | undefined` Eine CSS-Farbe, die sich gut von `brandIcon` abhebt. | | `brandIcon` | (Optional) `string | undefined` Ein quadratischer, 1-farbiger SVG, der sich gut von der `brandColor` abhebt. | | `description` | (Optional) `string | undefined` Eine Beschreibung des Zwecks der Ansicht, kann auch als Untertitel verwendet werden. | | `externalLink` | (Optional) `ExternalLink | undefined` 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](https://docs.stripe.com/stripe-apps/components/contextview.md#externallink). | | `footerContent` | (Optional) `React.ReactNode` React Node neben allen Aktionen in der Fußzeile. | | `primaryAction` | (Optional) `React.ReactElement | undefined` Eine primäre Aktionsaufruf-`Button` („Speichern“ oder „Fortfahren“) in der Fußzeile. | | `secondaryAction` | (Optional) `React.ReactElement | undefined` Eine sekundäre Aktionsaufruf-`Button` („Abbrechen“) in der Fußzeile. | ### Externer Link | Eigenschaft | Typ | | ----------- | ------------------------------------------------------- | | `href` | (Pflichtfeld) `string` URL eines externen Links. | | `label` | (Pflichtfeld) `string` Label eines externen Links. | ## Beispiel # 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. 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](https://docs.stripe.com/stripe-apps/reference/viewports.md)) verfügen, die beim Laden der Seite als Standardansicht fungiert (ähnlich wie `index.html` auf einer Website). ![ContextView in einer Anwendung](https://b.stripecdn.com/docs-statics-srv/assets/contextview-2.b7a229ed709708c7e83e700396b82327.png) Darstellung der ContextView > Informationen zum Erstellen einer Ansicht innerhalb einer bestehenden `ContextView` finden Sie unter [FocusView](https://docs.stripe.com/stripe-apps/components/focusview.md). ### ContextView-Eigenschaften | Eigenschaft | Typ | | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Pflichtfeld) `React.ReactNode` Der Inhalt der Komponente. | | `title` | (Pflichtfeld) `string` Der Titel der `ContextView`. Dieser wird oben im Drawer unter dem Namen dieser App angezeigt. | | `actions` | (Optional) `React.ReactNode` Ein React-Fragment mit bis zu drei `Buttons`, die direkt unter der Kopfzeile und über den untergeordneten Elementen der `ContextView` angezeigt werden. | | `banner` | (Optional) `React.ReactElement | undefined` Eine `Banner`-Komponente, die direkt unter der Kopfzeile und über den untergeordneten Elementen der `ContextView` angezeigt wird. | | `brandColor` | (Optional) `string | undefined` Eine CSS-Farbe, die sich gut von `brandIcon` abhebt. | | `brandIcon` | (Optional) `string | undefined` Ein quadratischer, 1-farbiger SVG, der sich gut von der `brandColor` abhebt. | | `description` | (Optional) `string | undefined` Eine Beschreibung des Zwecks der Ansicht, kann auch als Untertitel verwendet werden. | | `externalLink` | (Optional) `ExternalLink | undefined` 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](https://docs.stripe.com/stripe-apps/components/contextview.md#externallink). | | `footerContent` | (Optional) `React.ReactNode` React Node neben allen Aktionen in der Fußzeile. | | `primaryAction` | (Optional) `React.ReactElement | undefined` Eine primäre Aktionsaufruf-`Button` („Speichern“ oder „Fortfahren“) in der Fußzeile. | | `secondaryAction` | (Optional) `React.ReactElement | undefined` Eine sekundäre Aktionsaufruf-`Button` („Abbrechen“) in der Fußzeile. | ### Externer Link | Eigenschaft | Typ | | ----------- | ------------------------------------------------------- | | `href` | (Pflichtfeld) `string` URL eines externen Links. | | `label` | (Pflichtfeld) `string` Label eines externen Links. | ## Beispiel ## See also - [Entwurfsmuster als Orientierung](https://docs.stripe.com/stripe-apps/patterns.md) - [App gestalten](https://docs.stripe.com/stripe-apps/style.md) - [Test der Nutzeroberfläche](https://docs.stripe.com/stripe-apps/ui-testing.md)