Demos
Tabs where content is provided from outside
As this may be a more common use case, we still have to ensure our tabs content is linked together with the tabs – because of accessibility.
You have to provide an id
to both of the components.
NB: You don't need to use a function inside Tabs.Content
– it can contain any element you need, as long as it is a React Node.
one
<Tabsid="unique-linked-id"data={[{title: 'One',key: 'one',},{title: 'Two',key: 'two',},]}/><Tabs.Content id="unique-linked-id">{({ key }) => {return <H2>{key}</H2>}}</Tabs.Content>
Tabs using 'data' property and content object
First
<Tabsdata={[{ title: 'First', key: 'first' },{ title: 'Second', key: 'second' },{ title: 'Third', key: 'third', disabled: true },{ title: 'Fourth', key: 'fourth' },]}>{exampleContent /* See Example Content below */}</Tabs>
Tabs using 'data' property only
First
<Tabsdata={{first: {title: 'First',// See Example Content belowcontent: exampleContent.first,},second: {title: 'Second',// See Example Content belowcontent: exampleContent.second,},}}// Only use "on_click" if you really have toon_click={({ selected_key }) => {console.log('on_click', selected_key)}}// Preferred way to listen on changeson_change={({ selected_key }) => {console.log('on_change', selected_key)}}/>
Tabs using React Components only
Also, this is an example of how to define a different content background color, by providing content_style
.
First
<Tabs tabs_style="mint-green" content_style="black-3"><Tabs.Content title="First"><Section spacing top bottom style_type="white"><H2 top={0} bottom>First</H2></Section></Tabs.Content><Tabs.Content title="Second"><Section spacing top bottom style_type="white"><H2 top={0} bottom>Second</H2></Section></Tabs.Content></Tabs>
Tabs without bottom border
First
<Tabs no_border={true}><Tabs.Content title="First"><H2 top={0} bottom>First</H2></Tabs.Content><Tabs.Content title="Second"><H2 top={0} bottom>Second</H2></Tabs.Content></Tabs>
prerender
Tabs and By using prerender={true}
the content is kept inside the DOM.
Content 1
Smile at me 📸
<><Tabs prerender content_style="black-3"><Tabs.Content title="Tab 1"><H2>Content 1</H2></Tabs.Content><Tabs.Content title="Tab 2"><divstyle={{height: '10rem',display: 'flex',alignItems: 'flex-end',}}><H2>Content 2</H2></div></Tabs.Content><Tabs.Content title="Tab 3"><divstyle={{height: '20rem',display: 'flex',alignItems: 'flex-end',}}><H2>Content 3</H2></div></Tabs.Content></Tabs><P top>Smile at me 📸</P></>
Tabs optimized for narrow screens
Navigation buttons will be shown and the tabs-list will be scrollable.
Fourth
<Tabs data={manyTabs}>{manyTabsContent}</Tabs>
Horizontal aligned tabs
const FlexWrapper = styled.div`display: flex;flex-direction: row;`const LeftArea = styled.div`/* Ensure no-wrap */flex-shrink: 0;`const RightArea = styled.div`/* Ensure the tabbar is hidden outside this area */overflow: hidden;/* Ensure the focus ring is visible! (because of overflow: hidden) */margin: -2px;padding: 2px;`function TabsHorizontalAligned() {return (<FlexWrapper><LeftArea><ToggleButton.Group value="first"><ToggleButton text="first" value="first" /><ToggleButton text="second" value="second" /></ToggleButton.Group></LeftArea><RightArea><Tabsleftno_borderselected_key="first"id="unique-tabs-row"data={manyTabs}/></RightArea></FlexWrapper>)}render(<TabsHorizontalAligned />)
max-width usage
const MaxWidthWrapper = styled.div`max-width: 30rem;background: var(--color-mint-green-12);`function TabsMaxWidth() {return (<MaxWidthWrapper><Tabstopno_borderselected_key="fifth"id="unique-tabs-max-width"data={manyTabs}/></MaxWidthWrapper>)}render(<TabsMaxWidth />)
Router integration
This demo uses @reach/router
. More examples on CodeSandbox.
Example Content
const exampleContent = {first: () => <H2>First</H2>,second: () => <Input label="Label:">Focus me with next Tab key</Input>,third: () => (<><p>Paragraph 1</p><p>Paragraph 2</p></>),fourth: 'Fourth as a string only',}