Registerkarten
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';
<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>
Eigenschaften der Registerkarten
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Eine oder mehrere TabList- oder TabPanel-Komponenten. |
| Optional
Gibt an, ob die liste der Registerkarten die gesamte Breite des Containers einnehmen soll. |
| Optional
Rückruf, der ausgelöst werden soll, wenn eine Registerkarte ausgewählt ist. |
| Optional
Taste des aktuell ausgewählten Registerkarten-Panels, wenn die Komponente gesteuert wird. |
| Optional
Die Größe der Komponente. |
Registerkarte
The TabList component supports the selection of content. TabList is made up of a collection of Tab components. Each Tab can be uniquely identified with a tabKey prop. If you render Tab components using a map function, you must still add a key to satisfy the rules of React.
TabList-Eigenschaften
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Eine oder mehrere Schaltflächen-Komponenten. |
Eigenschaften der Registerkarte
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Der Inhalt der Komponente. |
| Optional
Gibt an, ob die Registerkarte deaktiviert werden soll. |
| OptionalDeprecated
A unique identifier to use with the Tabs |
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. |
| OptionalDeprecated
A unique identifier to use with the Tabs |
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={{backgroundColor: '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={{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>
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> ) : ( <Inline>Create results</Inline> )} </> </Tab> </TabList> <TabPanels> <TabPanel tabKey="1"> <> {result ? ( <Inline>Results</Inline> ) : ( <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> ) : ( <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> ); }
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] = useState("c"); return ( <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> );