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';
<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
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Eine oder mehrere |
| Optional
Gibt an, ob die |
| Optional
Rückruf, der ausgelöst werden soll, wenn eine |
| Optional
Taste der ausgewählten |
| Optional
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
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Eine oder mehrere |
Eigenschaften der Registerkarte
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Der Inhalt der Komponente. |
| Optional
Gibt an, ob die Registerkarte deaktiviert werden soll. |
| Optional
Eine eindeutige Kennung, die die Auswahl mithilfe der Eigenschaft |
| OptionalVeraltet Verwenden Sie stattdessen die Eigenschaft
Eine eindeutige Kennung, die mit dem |
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
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Der Inhalt der Komponente. |
| Optional
Eine eindeutige Kennung, die die Auswahl mithilfe der Eigenschaft |
| OptionalVeraltet Verwenden Sie stattdessen die Eigenschaft
Eine eindeutige Kennung, die mit dem |
Kleine Registerkarten
<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
<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.
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.
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> )