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> )