tabs.mdx

import { Layout, Playground, Attributes } from 'lib/components' import { Tabs, Spacer, Text, Button, Code, useTabs } from 'components' import { useState } from 'react' import TwitterIcon from '@geist-ui/icons/twitter' import TwitchIcon from '@geist-ui/icons/twitch'

export const meta = { title: 'Tabs', group: 'Navigation', }

Tabs

Display tab content.

The Tabs contain an additional Hooks, see subsection useTabs for details.

<Playground scope={{ Tabs }} desc="Toggle display of different templates." code={<Tabs initialValue="1"> <Tabs.Item label="http" value="1">HTTP is stateless, but not sessionless.</Tabs.Item> <Tabs.Item label="proxies" value="2">Between the Web browser and the server, numerous computers and machines relay the HTTP messages.</Tabs.Item> </Tabs>} />

<Playground title="Disabled" scope={{ Tabs }} code={<Tabs initialValue="1"> <Tabs.Item label="http" value="1">HTTP is stateless, but not sessionless.</Tabs.Item> <Tabs.Item label="jumped" value="2" disabled /> </Tabs>} />

<Playground title="Hide Divider" scope={{ Tabs, Text }} code={<Tabs initialValue="html" hideDivider> <Tabs.Item label="HTML" value="html"> <Text mt={0}>HTML is the language that we use to structure the different parts of our content and define what their meaning or purpose is.</Text> </Tabs.Item> <Tabs.Item label="CSS" value="css"> <Text mt={0}>CSS is the language that we can use to style and lay out our web content, as well as adding behavior like animation.</Text> </Tabs.Item> </Tabs>} />

<Playground title="Hide Border" scope={{ Tabs, Text }} code={<Tabs initialValue="html" hideDivider hideBorder leftSpace="6px"> <Tabs.Item label="HTML" value="html"> <Text mt={0}>HTML is the language that we use to structure the different parts of our content and define what their meaning or purpose is.</Text> </Tabs.Item> <Tabs.Item label="CSS" value="css"> <Text mt={0}>CSS is the language that we can use to style and lay out our web content, as well as adding behavior like animation.</Text> </Tabs.Item> </Tabs>} />

<Playground title="With Icon" desc="Show icon component on label button." scope={{ Tabs, TwitchIcon, TwitterIcon, Text }} code={<Tabs initialValue="1" align="center" leftSpace={0}> <Tabs.Item label={<><TwitchIcon /> Twitch TV</>} value="1"> <Text mt={0}>Hello, this is our live broadcast on Twitch.</Text> </Tabs.Item> <Tabs.Item label={<><TwitterIcon/> Twitter </>} value="2"> <Text mt={0}>The Components of React looks very cool.</Text> </Tabs.Item> </Tabs>} />

<Playground title="Scroll Behavior" desc="If all tabs cannot fit in the width then then hidden tabs can be accessed through user agent scrolling mechanisms (e.g. left/right swipe, shift-mousewheel, etc.)" scope={{ Tabs, TwitchIcon, TwitterIcon, Text }} code={<Tabs initialValue="1"> <Tabs.Item label="Home" value="1"> <Text>Hello!</Text> </Tabs.Item> <Tabs.Item label="About" value="2"> <Text>Cool stuff.</Text> </Tabs.Item> <Tabs.Item label="About Us" value="3"> <Text>Good people.</Text> </Tabs.Item> <Tabs.Item label="Features" value="4"> <Text>Amazing.</Text> </Tabs.Item> <Tabs.Item label="Pricing" value="5"> <Text>Very low.</Text> </Tabs.Item> <Tabs.Item label="Docs" value="6"> <Text>Clear.</Text> </Tabs.Item> <Tabs.Item label="Profile" value="7"> <Text>Extraordinary person.</Text> </Tabs.Item> <Tabs.Item label="Settings" value="8"> <Text>Easy to tweak.</Text> </Tabs.Item> <Tabs.Item label="Dashboard" value="9"> <Text>Charts.</Text> </Tabs.Item> <Tabs.Item label="Policies" value="10"> <Text>Privacy focused.</Text> </Tabs.Item> </Tabs>} />

<Playground title="Imperatively" desc="Control components with imperatively style." scope={{ Tabs, Button, Spacer, Code, Text, useState }} code={() => { const [value, setValue] = useState('1') const switchHandler = () => setValue('2') const changeHandler = val => setValue(val) return ( <> <Button scale={1/3} font="12px" onClick={switchHandler}><Text>Select <Code>Extensible</Code></Text></Button> <Spacer h={.5} /> <Tabs value={value} onChange={changeHandler}> <Tabs.Item label="stateless" value="1">HTTP is stateless, but not sessionless.</Tabs.Item> <Tabs.Item label="extensible" value="2">Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with.</Tabs.Item> </Tabs> </> ) }} />

Tabs.Props

Attribute	Description	Type	Accepted values	Default
initialValue	initial value	string	-	-
value	current selected value	string	-	-
hideDivider	hide default divider	boolean	-	false
hideBorder	hide border on active	boolean	-	false
leftSpace	space area on the left side	CSSProperties	-	12px
onChange	change event	(val: string) => void	-	-
align	horizontal alignment of each child item	justifyContent	-	left
activeClassName	className of active child item	string	-	-
activeStyles	style of active child item	object	-	-
hoverHeightRatio	height percentage of highlight block	number	-	0.7
hoverWidthRatio	width percentage of highlight block	number	-	1.15
...	native props	HTMLAttributes	'alt', 'id', 'className', ...	-

<Attributes.Title alias="Tabs.Tab">Tabs.Item.Props</Attributes.Title>

Attribute	Description	Type	Accepted values	Default
label(required)	display tab's label	string	-	-
value(required)	unique ident value	string	-	-
disabled	disable current tab	boolean	-	false

export default ({ children }) => {children}