Tabs
Tabs are sections of content that display one panel of content at a time. The list of tab elements sits along the top edge of the currently displayed panel.
To add the Tabs
component to your app:
import {Tabs, Tab, TabList, TabPanel, TabPanels} from '@stripe/ui-extension-sdk/ui';
Basic Tabs
<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 |
|
Small Tabs
<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>
Disabled Tabs
<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>
Tab
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.
Props
Prop | Type |
---|---|
children Required |
|
disabled |
|
tabKey |
|
TabPanel
The TabPanels
component supports displaying panels of content with Tabs. TabPanels
is made up of a collection of TabPanel
components. Each TabPanel
can be uniquely identified with a tabKey
prop. If you render TabPanel
components using a map
function, you must still add a key
to satisfy the rules of React.
Props
Prop | Type |
---|---|
children Required |
|
tabKey |
|
Controlled Tabs
Use the selectedKey
prop from Tabs
in combination with the tabKey
prop from Tab
and TabPanel
to create a controlled component.
<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>
Unsupported uses
Tabs don’t support conditional content within fragments unless the fragment children are given the same key.
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> ); }
To avoid unsupported uses of Tabs, use components instead of fragments. Alternatively, give the children of fragments a shared key
.
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> ); }