Weiter zum Inhalt
Konto erstellen
oder
anmelden
Das Logo der Stripe-Dokumentation
/
KI fragen
Konto erstellen
Anmelden
Jetzt starten
Zahlungen
Umsatz
Plattformen und Marktplätze
Geldmanagement
Entwicklerressourcen
Übersicht
Versionierung
Änderungsprotokoll
Aktualisieren Sie Ihre API-Version
Ihre SDK-Version aktualisieren
Essentials
SDKs
API
Tests
Stripe-CLI
Tools
Workbench
Entwickler-Dashboard
Stripe Shell
Stripe für Visual Studio Code
Funktionen
Arbeitsabläufe
Ereignisziele
Stripe-StatuswarnungenHochgeladene Dateien
AI solutions
Agent-Toolkit
Build with an LLM
Sicherheit und Datenschutz
Sicherheit
Datenschutz
Extend Stripe
Stripe-Apps
    Übersicht
    Jetzt starten
    Eine App erstellen
    Funktionsweise von Stripe-Apps
    Beispiel-Apps
    App erstellen
    Shop-Geheimnisse
    API-Authentifizierungsmethoden
    Autorisierungsabläufe
    Serverseitige Logik
    Ereignisse überwachen
    Umgang mit verschiedenen Modi
    Sandbox-Unterstützung aktivieren
    App-Einstellungsseite
    Erstellen Sie eine Nutzeroberfläche
    Onboarding
    Ihre App verbreiten
    Vertriebsmöglichkeiten
    App hochladen
    Versionen und Releases
    Ihre App testen
    Ihre App veröffentlichen
    Ihre App bewerben
    Deep-Links hinzufügen
    Installationslinks erstellen
    Rollen in Erweiterungen der Nutzeroberfläche zuweisen
    Aktionen nach der Installation
    App-Analytik
    Embedded components
    Stripe-Apps von Drittanbietern einbetten
    Umstellung auf Stripe Apps
    Migrieren oder Erweiterung erstellen
    Ein Plugin zu Stripe Apps oder Stripe Connect migrieren
    Verwendungszweck
    App-Manifest
    CLI
    Erweiterungs-SDK
    Berechtigungen
    Darstellungsfelder
    Entwurfsmuster
    Komponenten
      Accordion
      Badge
      Banner
      Balkendiagramm
      Textfeld
      Schaltfläche
      ButtonGroup
      Kontrollkästchen
      Chip
      ContextView
      DateField
      Trennzeichen
      FocusView
      FormFieldGroup
      Symbol
      Img
      Inline
      Liniendiagramm
      Link
      Liste
      Menü
      PropertyList
      Radio
      Auswählen
      SettingsView
      SignInView
      Sparkline
      Sanduhr
      Wechseln
      Tisch
      Registerkarten
      Aufgabenliste
      TextArea
      TextField
      Toast
      QuickInfo
Stripe Connectors
Partner
Partner-Ecosystem
Partner-Zertifizierung
StartseiteEntwicklerressourcenStripe AppsComponents

Registerkarten-Komponente für Stripe-Apps

Verwenden Sie Registerkarten, um Inhaltsabschnitte anzuzeigen.

Registerkarten sind Inhaltsabschnitte, die jeweils ein Inhaltsfeld anzeigen. Die Liste der Registerkartenelemente ist am oberen Rand des aktuell angezeigten Bereichs angeordnet.

So fügen Sie Ihrer App die Tabs Komponente hinzu:

import {Tabs, Tab, TabList, TabPanel, TabPanels} from '@stripe/ui-extension-sdk/ui';
Beispiel wird geladen ...
<Box css={{width: 'fill'}}> <Tabs fitted> <TabList> {[1, 2].map((i) => ( <Tab key={i} tabKey={i}> Tab {i} </Tab> ))} </TabList> <TabPanels> {[1, 2].map((i) => ( <TabPanel key={i} tabKey={i}> <Box css={{backgroundColor: 'container', padding: 'large'}}> Tab panel {i} </Box> </TabPanel> ))} </TabPanels> </Tabs> </Box>

Eigenschaften der Registerkarten

EigenschaftTyp

children

Pflichtfeld

React.ReactNode

Eine oder mehrere TabList- oder TabPanels-Komponenten.

fitted

Optional

boolean | undefined

Gibt an, ob die TabList die gesamte Breite des Containers einnehmen soll.

onSelectionChange

Optional

((event: React.Key) => void) | undefined

Rückruf, der ausgelöst werden soll, wenn eine Tab ausgewählt ist.

selectedKey

Optional

React.Key | undefined

Taste der ausgewählten Tab, wenn diese als gesteuerte Komponente verwendet wird. Verwenden Sie onSelectionChange, um den Status der Registerkartenauswahl zu steuern.

size

Optional

("small" | "medium" | "large") | undefined

Die Größe der Komponente.

Registerkarte

Die Komponente TabList unterstützt die Auswahl von Inhalt. TabList besteht aus einer Sammlung von Tab-Komponenten. Jede Tab kann mit einer tabKey-Eigenschaft eindeutig identifiziert werden. Wenn Sie Tab-Komponenten mithilfe einer map-Funktion rendern, müssen Sie dennoch einen key hinzufügen, um die Regeln von React zu erfüllen.

TabList-Eigenschaften

EigenschaftTyp

children

Pflichtfeld

React.ReactNode

Eine oder mehrere Tab-Komponenten.

Eigenschaften der Registerkarte

EigenschaftTyp

children

Pflichtfeld

React.ReactNode

Der Inhalt der Komponente.

disabled

Optional

boolean | undefined

Gibt an, ob die Registerkarte deaktiviert werden soll.

id

Optional

string | undefined

Eine eindeutige Kennung, die die Auswahl mithilfe der Eigenschaft selectedKey der Komponente Tabs steuert.

tabKey

OptionalVeraltet

Verwenden Sie stattdessen die Eigenschaft id.

(React.Key | null) | undefined

Eine eindeutige Kennung, die mit dem selectedKey der Tabs verwendet werden soll.

TabPanel

Die Komponente TabPanels unterstützt die Anzeige von Inhaltsbereichen mit Registerkarten. TabPanels besteht aus einer Auflistung von TabPanel-Komponenten. Jedes TabPanel kann eindeutig mit einer tabKey-Eigenschaft identifiziert werden. Wenn Sie TabPanel-Komponenten mithilfe einer map-Funktion rendern, müssen Sie dennoch einen key hinzufügen, um die Regeln von React zu erfüllen.

TabPanel-Eigenschaften

EigenschaftTyp

children

Pflichtfeld

React.ReactNode

Der Inhalt der Komponente.

id

Optional

string | undefined

Eine eindeutige Kennung, die die Auswahl mithilfe der Eigenschaft selectedKey der Komponente Tabs steuert.

tabKey

OptionalVeraltet

Verwenden Sie stattdessen die Eigenschaft id.

(React.Key | null) | undefined

Eine eindeutige Kennung, die mit dem selectedKey der Tabs verwendet werden soll.

Kleine Registerkarten

Beispiel wird geladen ...
<Box css={{width: 'fill'}}> <Tabs size="small"> <TabList> {[1, 2, 3, 4, 5].map((i) => ( <Tab key={i} tabKey={i}> Tab {i} </Tab> ))} </TabList> <TabPanels> {[1, 2, 3, 4, 5].map((i) => ( <TabPanel key={i} tabKey={i}> <Box css={{backgroundColor: 'container', padding: 'large'}}> Tab panel {i} </Box> </TabPanel> ))} </TabPanels> </Tabs> </Box>

Deaktivierte Registerkarten

Beispiel wird geladen ...
<Box css={{width: 'fill'}}> <Tabs size="large" fitted> <TabList> <Tab tabKey="1">Tab</Tab> <Tab tabKey="2">Another Tab</Tab> <Tab tabKey="3" disabled> Disabled Tab </Tab> </TabList> <TabPanels> <TabPanel tabKey="1"> <Box css={{backgroundColor: 'container', padding: 'large'}}> Test Tab Panel 1 </Box> </TabPanel> <TabPanel tabKey="2"> <Box css={{backgroundColor: 'container', padding: 'large'}}> Test Tab Panel 2 </Box> </TabPanel> <TabPanel tabKey="3"> <Box css={{backgroundColor: 'container', padding: 'large'}}> Test Tab Panel 3 </Box> </TabPanel> </TabPanels> </Tabs> </Box>

Nicht unterstützte Verwendungszwecke

Registerkarten unterstützen keine bedingten Inhalte in Fragmenten, es sei denn, die untergeordneten Fragmente erhalten denselben Schlüssel.

const [result, setResult] = React.useState(null); return ( <Box css={{width: 'fill'}}> <Tabs> <TabList> <Tab tabKey="1"> <> {result ? ( <Inline>View results</Inline> ) : ( <Inline>Create results</Inline> )} </> </Tab> </TabList> <TabPanels> <TabPanel tabKey="1"> <> {result ? ( <Inline>Results</Inline> ) : ( <Inline>No results yet</Inline> )} </> </TabPanel> </TabPanels> </Tabs> </Box> )

Um die nicht unterstützte Verwendung von Registerkarten zu vermeiden, verwenden Sie Komponenten anstelle von Fragmenten. Alternativ können Sie den untergeordneten Elementen von Fragmenten einen gemeinsamen key geben.

Beispiel wird geladen ...
const [result, setResult] = React.useState(null); return ( <Box css={{width: 'fill'}}> <Tabs> <TabList> <Tab tabKey="1"> <Box> {result ? ( <Inline>View results</Inline> ) : ( <Inline>Create results</Inline> )} </Box> </Tab> </TabList> <TabPanels> <TabPanel tabKey="1"> <> {result ? ( <Inline key="tab-panel-results">Results</Inline> ) : ( <Inline key="tab-panel-no-results">No results yet</Inline> )} </> </TabPanel> </TabPanels> </Tabs> </Box> )

Kontrollierte Registerkarten

Verwenden Sie die Eigenschaft selectedKey von Tabs in Kombination mit der Eigenschaft tabKey von Tab und TabPanel, um eine kontrollierte Komponente zu erstellen.

Beispiel wird geladen ...
const [key, setSelectedKey] = React.useState<React.Key>('c'); return ( <Box css={{width: 'fill'}}> <Tabs selectedKey={key} onSelectionChange={setSelectedKey}> <TabList> {['a', 'b', 'c', 'd', 'e'].map((key) => ( <Tab key={key} tabKey={key}> Tab {key} </Tab> ))} </TabList> <TabPanels> {['a', 'b', 'c', 'd', 'e'].map((key) => ( <TabPanel key={key} tabKey={key}> <Box css={{backgroundColor: 'container', padding: 'large'}}> Tab panel {key} </Box> </TabPanel> ))} </TabPanels> </Tabs> </Box> )

Siehe auch

  • Entwurfsmuster als Orientierung
  • App gestalten
  • Test der Nutzeroberfläche
War diese Seite hilfreich?
JaNein
Benötigen Sie Hilfe? Kontaktieren Sie den Kundensupport.
Nehmen Sie an unserem Programm für frühzeitigen Zugriff teil.
Schauen Sie sich unser Änderungsprotokoll an.
Fragen? Sales-Team kontaktieren.
LLM? Lesen Sie llms.txt.
Unterstützt von Markdoc