UI-Komponenten

Entwickeln Sie schnell Ihre Nutzeroberfläche mithilfe der Komponenten der Stripe-Bibliothek.

Wenn Ihre App ein Frontend benötigt, ziehen Sie diese Referenzdokumentation zum Entwerfen einer Nutzeroberfläche heran. Die Stripe-Bibliothek aus vordefinierten Komponenten umfasst anpassbare Eigenschaften, mit denen Sie schnell Apps entsprechend den Best Practices von Stripe erstellen können. Verwenden Sie Komponenten, um Layouts zu strukturieren und grafische oder interaktive Erfahrungen in Ihren Apps zu erstellen.

Alle Komponenten sind in Figma unter @stripedesign in der Figma-Community verfügbar.

Ansichten

Jede Ansicht, die Sie hinzufügen, benötigt eine Ansichtskomponente. Sie bestimmen, was die Nutzer/innen Ihrer App an verschiedenen Punkten sehen, ähnlich wie HTML-Seiten einer Website.

Die häufigste Ansicht ist ContextView. Wenn ein/e Nutzer/in mit einem Workflow oder einer Aufgabe in der App beginnt, sollte die Ansicht zu FocusView wechseln, um die Hintergrunddetails auszublenden. Verwenden Sie SettingsView, um die Seite Ihrer App-Einstellungen zu gestalten und SignInView, um einen Anmeldebildschirm zu erstellen.

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	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.
SettingsView	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	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	Verwenden Sie Textfelder, um andere Komponenten zu wrappen und nutzerdefinierte Stile und Layouts hinzuzufügen.
Trennlinie	Rendern Sie eine einfache horizontale Linie mit der Komponente „Trennzeichen“.

Mit Navigationskomponenten können Sie Nutzer/innen die Bewegung und Interaktion in der App erleichtern.

Komponente	Beschreibung
Schaltfläche	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	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ü	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	Verwenden Sie Registerkarten, um Inhaltsabschnitte anzuzeigen.

Inhalt

Mit Inhaltskomponenten können Sie Informationen in Ihrer App organisieren und platzieren.

Komponente	Beschreibung
Accordion	Verwenden Sie Accordion-Elemente, um lange oder komplexe Inhalte in ausblendbare Abschnitte aufzuteilen.
Badge	Verwenden Sie Badges, um Statuswerte anzugeben, die ein Element oder Objekt durchlaufen kann oder in die es sich ändern kann.
Banner	Verwenden Sie das Banner, um eine Vielzahl von Warnungen und Meldungen anzuzeigen, die Sie explizit für Nutzer/innen angeben möchten.
Chip	Verwenden Sie Chips, um Werte anzuzeigen und Nutzer/innen das Bearbeiten von Werten zu ermöglichen.
FocusView	Verwenden Sie FocusView, um einen speziellen Bereich zu öffnen, in dem der/die Endnutzer/in eine bestimmte Aufgabe durchführen kann.
Icon	Zeigen Sie eine Symbolgrafik in einem kompatiblen Format an.
Img	Zeigen Sie Bilder mit der Img-Komponente der Nutzeroberfläche an.
Inline	Verwenden Sie die Inline-Komponente, um Inline-Inhalte wie beispielsweise Text anzupassen.
Liste	Zeigen Sie eine Liste mit Informationen in verschiedenen vorkonfigurierten Formaten an.
Sanduhr	Verwenden Sie die Sanduhr, um anzugeben, dass Daten geladen werden.
Tabelle	Zeigen Sie Zeilen und Spalten mit Daten an.
Toast	Nutzer/innen über den temporären Status informieren.
Tooltip	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	Mithilfe von Kontrollkästchen können Sie boolesche Werte angeben oder kontrollieren.
Datumsfeld	Verwenden Sie DateField, um ein Datumseingabefeld zu erstellen.
Formfeldgruppe	Gruppieren Sie Formularfelder mit der FormFieldGroup-Komponente.
Radio	Verwenden Sie Optionsschaltflächen, um aus einer Reihe von sich gegenseitig ausschließenden Optionen eine Auswahl zu treffen.
Auswahl	Verwenden Sie „Auswählen“, um aus einer Reihe von Optionen in einem Dropdown-Menü auszuwählen.
Umschalter	Ähnlich wie Kontrollkästchen können Umschalter boolesche Werte angeben oder kontrollieren.
TextArea	Verwenden Sie TextArea, um ein Eingabefeld für mehrere Textzeilen zu erstellen.
TextField	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	In einem Balkendiagramm werden Daten als eine Reihe von Datenpunkten mithilfe von Balken dargestellt.
Liniendiagramm	In einem Liniendiagramm werden Daten als eine Reihe von Datenpunkten dargestellt, die zu einer Linie verbunden sind.
Sparkline	Ein Liniendiagramm, in der Daten als einfache Linie dargestellt werden.