Used to navigate tabs of different pages of content that have no sequential or
interdependent relationship process. If needed, ‘counter’ indicates quantity of
something in a tab.
Default
< Tabs>
< Tab name = " Overview" />
< Tab name = " CV" />
< Tab name = " Shows" />
< Tab name = " Auction Results" />
< Tab name = " Articles" />
< Tab name = " Related Artists" />
</ Tabs> Copy
Rendering content
<Tabs
initialTabIndex={1}
onChange={(activeTab) => {
console.log(activeTab)
}}
>
< Tab name = " Hello" > Hello</ Tab>
< Tab name = " How" > How</ Tab>
< Tab name = " Are" > Are</ Tab>
< Tab name = " You?" > You?</ Tab>
</ Tabs> Copy
With arbitrary data and onChange handler
<Tabs
onChange={(activeTab) => {
console.log(activeTab.data)
}}
>
< Tab data = {{ target: "#about" }} name = " About" />
< Tab data = {{ target: "#pricing" }} name = " Pricing" />
< Tab data = {{ target: "#condition" }} name = " Condition" />
</ Tabs> Copy
With custom justification
< Tabs justifyContent = " center" >
< Tab name = " About" />
< Tab name = " Pricing" />
< Tab name = " Condition" />
</ Tabs> Copy
With separator
< Tabs justifyContent = " center" separator = {<Box mx = {1}> ♞</ Box> }>
< Tab name = " About" />
< Tab name = " Pricing" />
< Tab name = " Condition" />
</ Tabs> Copy
With superscript
< Tabs justifyContent = " center" >
< Tab
name = {
< >
Open < Sup color = " brand" > 100</ Sup>
</>
}
/>
< Tab
name = {
< >
Ready to ship < Sup color = " brand" > 4</ Sup>
</>
}
/>
< Tab name = {<> Complete</>} />
</ Tabs> Copy
Can auto scroll to center active tabs
< Tabs autoScroll >
< Tab name = " Pricing" />
< Tab name = " Rainbows" />
< Tab name = " Unicorns" />
< Tab name = " Falafel" />
< Tab name = " Delorean" />
< Tab name = " Po-ta-toes" />
< Tab name = " Jesuits" />
< Tab name = " Mastadon" />
< Tab name = " Funicular" />
< Tab name = " DiCaprio" />
< Tab name = " Fathomable" />
< Tab name = " Shiny" />
< Tab name = " Cyprus" />
< Tab name = " UMass" />
< Tab name = " Skiing" />
< Tab name = " Liver" />
< Tab name = " Magazine" />
</ Tabs> Copy
Supports empty(null) tabs by ignoring them
< Tabs>
{null}
{false}
< Tab name = " Pricing" />
</ Tabs> Copy