# UI-Komponenten Verwenden Sie die Stripe-Komponentenbibliothek, um Ihre Nutzeroberfläche zu erstellen. Wenn Ihre App eine Nutzeroberfläche benötigt, nutzen Sie diese Referenzdokumentation, um eine Nutzeroberfläche zu erstellen. Die Stripe-Bibliothek mit vorgefertigten Komponenten verfügt über anpassbare Eigenschaften, die Ihnen dabei helfen, Apps zu entwickeln, die den Best Practices von Stripe entsprechen. Verwenden Sie Komponenten, um Layouts zu strukturieren und grafische oder interaktive Oberflächen in Ihren Apps zu erstellen. ## Ansichten Jede [Ansicht, die Sie hinzufügen](https://docs.stripe.com/stripe-apps/build-ui.md), benötigt eine Ansichtskomponente. Sie bestimmen, was die Nutzer/innen Ihrer App an verschiedenen Punkten sehen, ähnlich wie HTML-Seiten einer Website. Die am häufigsten verwendete Ansicht ist die `ContextView`. Wenn ein Nutzer oder eine Nutzerin einen Workflow oder eine Aufgabe in Ihrer App startet, wechseln Sie zur `FocusView`, um die Hintergrunddetails auszublenden. Verwenden Sie die `SettingsView`, um die Einstellungsseite Ihrer App zu gestalten. Verwenden Sie die `SignInView`, um einen Anmeldebildschirm zu gestalten. Einige Ansichten sind Root-Komponenten. `ContextView`, `SettingsView` und `SignInView` sind Stammansichten, also die Grundkomponenten, die alle anderen Nutzeroberflächenelemente enthalten. `FocusView` ist hingegen eine untergeordnete Komponente von `ContextView`. | Komponente | Beschreibung | | --- | --- | | [ContextView](https://docs.stripe.com/stripe-apps/components/contextview.md) | 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. | | [FullPageView](https://docs.stripe.com/stripe-apps/components/fullpageview.md) | Verwenden Sie „FullPageView“, um Ihre App in einem ganzseitigen Ansichtsbereich darzustellen. | | [OnboardingView](https://docs.stripe.com/stripe-apps/components/onboardingview.md) | Verwenden Sie OnboardingView, um Nutzer durch einen Onboarding-Ablauf in Ihrer App zu führen. | | [SettingsView](https://docs.stripe.com/stripe-apps/components/settingsview.md) | Mit SettingsView können Sie es Nutzer/innen ermöglichen, dass diese Details zur Art und Weise ändern im Hinblick darauf, wie die App mit deren Konto funktioniert. | | [SignInView](https://docs.stripe.com/stripe-apps/components/signinview.md) | Verwenden Sie SignInView, um Nutzer/innen einen Anmeldebildschirm anzuzeigen. | ## Layout Verwenden Sie Layoutkomponenten, um die Struktur Ihrer Seiten und Elemente zu erstellen. | Komponente | Beschreibung | | --- | --- | | [Box](https://docs.stripe.com/stripe-apps/components/box.md) | Verwenden Sie Textfelder, um andere Komponenten zu wrappen und nutzerdefinierte Stile und Layouts hinzuzufügen. | | [DetailPage](https://docs.stripe.com/stripe-apps/components/detailpage.md) | Verwenden Sie „DetailPage“, um Layouts im Detailstil in Ihrer App zu implementieren. | | [Trennlinie](https://docs.stripe.com/stripe-apps/components/divider.md) | Rendern Sie eine einfache horizontale Linie mit der Komponente „Trennzeichen“. | | [OverviewPage](https://docs.stripe.com/stripe-apps/components/overviewpage.md) | Verwenden Sie „OverviewPage“, um Layouts im Übersichtsstil in Ihrer App zu implementieren. | ## Navigation Mit Navigationskomponenten können Sie Nutzer/innen die Bewegung und Interaktion in der App erleichtern. | Komponente | Beschreibung | | --- | --- | | [Schaltfläche](https://docs.stripe.com/stripe-apps/components/button.md) | Mithilfe von Schaltflächen können Nutzer/innen Aktionen in Stripe-Produkten ausführen. Außerdem kann mit ihnen die Aufmerksamkeit der Nutzer/innen auf etwas gelenkt bzw. Nutzer/innen über Ergebnisse gewarnt werden. | | [ButtonGroup](https://docs.stripe.com/stripe-apps/components/buttongroup.md) | Verwenden Sie ButtonGroup, um das Layout für mehrere Schaltflächen zu verwalten und sie in einem Überlaufmenü zusammenzuklappen, wenn der Platz begrenzt ist. | | Link | Links werden verwendet, um Nutzer/innen von einer Seite zur nächsten zu leiten. Außerdem dienen sie für Aktionen, die mehr Subtilität erfordern als eine Schaltfläche bietet. | | [Menü](https://docs.stripe.com/stripe-apps/components/menu.md) | Ein Menü stellt eine Gruppe von Aktionen dar, aus denen Nutzer/innen wählen können. Diese beziehen sich häufig auf ein bestimmtes Objekt oder einen bestimmten Kontext. | | [Registerkarten](https://docs.stripe.com/stripe-apps/components/tabs.md) | Verwenden Sie Registerkarten, um Inhaltsabschnitte anzuzeigen. | ## Inhalt Mit Inhaltskomponenten können Sie Informationen in Ihrer App organisieren und platzieren. | Komponente | Beschreibung | | --- | --- | | [Accordion](https://docs.stripe.com/stripe-apps/components/accordion.md) | Verwenden Sie Accordion-Elemente, um lange oder komplexe Inhalte in ausblendbare Abschnitte aufzuteilen. | | [Badge](https://docs.stripe.com/stripe-apps/components/badge.md) | Verwenden Sie Badges, um Statuswerte anzugeben, die ein Element oder Objekt durchlaufen kann oder in die es sich ändern kann. | | [Banner](https://docs.stripe.com/stripe-apps/components/banner.md) | Verwenden Sie das Banner, um eine Vielzahl von Warnungen und Meldungen anzuzeigen, die Sie explizit für Nutzer/innen angeben möchten. | | [Chip](https://docs.stripe.com/stripe-apps/components/chip.md) | Verwenden Sie Chips, um Werte anzuzeigen und Nutzer/innen das Bearbeiten von Werten zu ermöglichen. | | [DataTable](https://docs.stripe.com/stripe-apps/components/datatable.md) | Verwenden Sie „DataTable“, um tabellarische Daten mit Sortier-, Filter- und Paginierungsfunktionen anzuzeigen. | | [FocusView](https://docs.stripe.com/stripe-apps/components/focusview.md) | Verwenden Sie FocusView, um einen speziellen Bereich zu öffnen, in dem der/die Endnutzer/in eine bestimmte Aufgabe durchführen kann. | | [Icon](https://docs.stripe.com/stripe-apps/components/icon.md) | Zeigen Sie eine Symbolgrafik in einem kompatiblen Format an. | | [Img](https://docs.stripe.com/stripe-apps/components/img.md) | Zeigen Sie Bilder mit der Img-Komponente der Nutzeroberfläche an. | | [Inline](https://docs.stripe.com/stripe-apps/components/inline.md) | Verwenden Sie die Inline-Komponente, um Inline-Inhalte wie beispielsweise Text anzupassen. | | [Liste](https://docs.stripe.com/stripe-apps/components/list.md) | Zeigen Sie eine Liste mit Informationen in verschiedenen vorkonfigurierten Formaten an. | | [PropertyList](https://docs.stripe.com/stripe-apps/components/propertylist.md) | Verwenden Sie „PropertyList“, um Daten als Schlüssel-Wert-Paare anzuzeigen. | | [Sanduhr](https://docs.stripe.com/stripe-apps/components/spinner.md) | Verwenden Sie die Sanduhr, um anzugeben, dass Daten geladen werden. | | [Tabelle](https://docs.stripe.com/stripe-apps/components/table.md) | Zeigen Sie Zeilen und Spalten mit Daten an. | | [TaskList](https://docs.stripe.com/stripe-apps/components/tasklist.md) | Nutzen Sie „TaskList“, um Nutzerinnen und Nutzern dabei zu helfen, den Fortschritt anhand einer Aufgabenliste zu verfolgen. | | [Toast](https://docs.stripe.com/stripe-apps/components/toast.md) | Nutzer/innen über den temporären Status informieren. | | [Tooltip](https://docs.stripe.com/stripe-apps/components/tooltip.md) | Verwenden Sie QuickInfos, um zusätzliche kontextbezogene Informationen zu einem bestimmten Element oder Thema anzugeben. | ## Formulare Verwenden Sie Formularkomponenten, um Eingabefelder und Steuerelemente zu erstellen, die die Eingabe durch Nutzer/innen erfordern. Verwenden Sie sie zum Beispiel, um Checklisten zu erstellen und Nutzer/innen die Auswahl von Einstellungen zu ermöglichen. | Komponente | Beschreibung | | --- | --- | | [Kontrollkästchen](https://docs.stripe.com/stripe-apps/components/checkbox.md) | Mithilfe von Kontrollkästchen können Sie boolesche Werte angeben oder kontrollieren. | | [CurrencyField](https://docs.stripe.com/stripe-apps/components/currencyfield.md) | Verwenden Sie „CurrencyField“ zur Verarbeitung von Zahlungsbeträgen. | | [Datumsfeld](https://docs.stripe.com/stripe-apps/components/datefield.md) | Verwenden Sie DateField, um ein Datumseingabefeld zu erstellen. | | [DateRangePicker](https://docs.stripe.com/stripe-apps/components/daterangepicker.md) | Verwenden Sie DateRangePicker, um einen Datumsbereich von Nutzerinnen und Nutzern zu erfassen. | | [Formfeldgruppe](https://docs.stripe.com/stripe-apps/components/formfieldgroup.md) | Gruppieren Sie Formularfelder mit der FormFieldGroup-Komponente. | | [Radio](https://docs.stripe.com/stripe-apps/components/radio.md) | Verwenden Sie Optionsschaltflächen, um aus einer Reihe von sich gegenseitig ausschließenden Optionen eine Auswahl zu treffen. | | [SearchField](https://docs.stripe.com/stripe-apps/components/searchfield.md) | Verwenden Sie „SearchField“, damit Nutzer/innen Inhalte in Ihrer App suchen und filtern können. | | [Auswahl](https://docs.stripe.com/stripe-apps/components/select.md) | Verwenden Sie „Auswählen“, um aus einer Reihe von Optionen in einem Dropdown-Menü auszuwählen. | | [Umschalter](https://docs.stripe.com/stripe-apps/components/switch.md) | Ähnlich wie Kontrollkästchen können Umschalter boolesche Werte angeben oder kontrollieren. | | [TextArea](https://docs.stripe.com/stripe-apps/components/textarea.md) | Verwenden Sie TextArea, um ein Eingabefeld für mehrere Textzeilen zu erstellen. | | [TextField](https://docs.stripe.com/stripe-apps/components/textfield.md) | Verwenden Sie TextField, um ein Texteingabefeld zu erstellen. | ## Diagramme Verwenden Sie Diagrammkomponenten, um Datenpunkte visuell darzustellen. Sie können beispielsweise ein Diagramm in Ihrer App anzeigen, damit Nutzer/innen Zahlungsdaten verfolgen oder den Fortschritt mit der Zeit vergleichen können. | Komponente | Beschreibung | | --- | --- | | [Balkendiagramm](https://docs.stripe.com/stripe-apps/components/barchart.md) | In einem Balkendiagramm werden Daten als eine Reihe von Datenpunkten mithilfe von Balken dargestellt. | | [Liniendiagramm](https://docs.stripe.com/stripe-apps/components/linechart.md) | In einem Liniendiagramm werden Daten als eine Reihe von Datenpunkten dargestellt, die zu einer Linie verbunden sind. | | [Sparkline](https://docs.stripe.com/stripe-apps/components/sparkline.md) | Ein Liniendiagramm, in der Daten als einfache Linie dargestellt werden. | | [MeterChart](https://docs.stripe.com/stripe-apps/components/meterchart.md) | Ein Zählerdiagramm zeigt ein in Segmente unterteiltes Ganzes an, wobei jedes Segment einen Anteil am Gesamtwert darstellt. | ## 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)