Onglets
Les onglets sont des sections qui affichent un panneau de contenu à la fois. Les différents onglets disponibles apparaissent sur le bord supérieur du panneau actuellement sélectionné.
Pour ajouter le composant Tabs
à votre application :
import {Tabs, Tab, TabList, TabPanel, TabPanels} from '@stripe/ui-extension-sdk/ui';
Onglets de base
<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 |
|
Petits onglets
<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>
Onglets désactivés
<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>
Onglet
Le composant TabList
prend en charge la sélection du contenu. TabList
est constitué d’une collection de composants Tab
. Chaque Tab
peut être identifié à l’aide d’une propriété tabKey
. Si vous affichez des composants Tab
à l’aide d’une fonction map
, vous devez tout de même ajouter une key
pour respecter les règles de React.
Props
Prop | Type |
---|---|
children Required |
|
disabled |
|
tabKey |
|
TabPanel
Le composant TabPanels
prend en charge l’affichage de panneaux de contenu avec des onglets. TabPanels
est constitué d’un ensemble de composants TabPanel
. Chaque TabPanel
peut être identifié à l’aide d’une propriété tabKey
. Si vous affichez des composants TabPanel
à l’aide d’une fonction map
, vous devez tout de même ajouter une key
pour respecter les règles de React.
Props
Prop | Type |
---|---|
children Required |
|
tabKey |
|
Onglets contrôlés
Utilisez la propriété selectedKey
de Tabs
avec la propriété tabKey
de Tab
et de TabPanel
pour créer un composant contrôlé.
<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>
Utilisations non prises en charge
Les onglets ne prennent pas en charge le contenu conditionnel dans les fragments, sauf si le fragment enfant reçoit une clé identique.
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> ); }
Utilisez des composants au lieu de fragments afin d’éviter les utilisations non prises en charge des onglets. Vous pouvez aussi donner une key
partagée aux fragments enfants.
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> ); }