Registerkarten
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';
Grundlegende Registerkarten
<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={{background: 'container', padding: 'large'}}>Tab panel {i}</Box> </TabPanel> ))} </TabPanels> </Tabs>
Props
Prop | Type |
---|---|
children Required |
|
fitted |
|
onSelectionChange |
|
selectedKey |
|
size |
|
Kleine Registerkarten
<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={{background: 'container', padding: 'large'}}>Tab panel {i}</Box> </TabPanel> ))} </TabPanels> </Tabs>
Deaktivierte Registerkarten
<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={{background: 'container', padding: 'large'}}>Test Tab Panel 1</Box> </TabPanel> <TabPanel tabKey="2"> <Box css={{background: 'container', padding: 'large'}}>Test Tab Panel 2</Box> </TabPanel> <TabPanel tabKey="3"> <Box css={{background: 'container', padding: 'large'}}>Test Tab Panel 3</Box> </TabPanel> </TabPanels> </Tabs>
Registerkarte
Die Komponente TabList
unterstützt die Auswahl von Inhalten. TabList
besteht aus einer Auflistung von Tab
-Komponenten. Jede Tab
kann eindeutig mit einer tabKey
-Eigenschaft 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.
Props
Prop | Type |
---|---|
children Required |
|
disabled |
|
tabKey |
|
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.
Props
Prop | Type |
---|---|
children Required |
|
tabKey |
|
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.
<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={{background: 'container', padding: 'large'}}>Tab panel {key}</Box> </TabPanel> ))} </TabPanels> </Tabs>
Nicht unterstützte Verwendungszwecke
Registerkarten unterstützen keine bedingten Inhalte in Fragmenten, es sei denn, die untergeordneten Fragmente erhalten denselben Schlüssel.
const UnsupportedExample = () => { const [result, setResult] = useState(null); return ( <Tabs> <TabList> <Tab tabKey="1"> <> {result && <Inline>View results</Inline>} {!result && <Inline>Create results</Inline>} </> </Tab> </TabList> <TabPanels> <TabPanel tabKey="1"> <> {result && <Inline>Results</Inline>} {!result && <Inline>No results yet</Inline>} </> </TabPanel> </TabPanels> </Tabs> ); }
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 SupportedExample = () => { const [result, setResult] = useState(null); return ( <Tabs> <TabList> <Tab tabKey="1"> <Box> {result && <Inline>View results</Inline>} {!result && <Inline>Create results</Inline>} </Box> </Tab> </TabList> <TabPanels> <TabPanel tabKey="1"> <> {result && <Inline key="tab-panel-result">Results</Inline>} {!result && <Inline key="tab-panel-result">No results yet</Inline>} </> </TabPanel> </TabPanels> </Tabs> ); }