First Second Third Fourth
Usage import { Tabs , Tab } from '@loomhq/lens'
< Tabs >
< Tab onClick = { ( ) => { } } > First </ Tab >
< Tab onClick = { ( ) => { } } isActive > Second </ Tab >
< Tab onClick = { ( ) => { } } > Third </ Tab >
</ Tabs >
Active tab < Tabs >
< Tab > { demoText . ordinals [ 0 ] } </ Tab >
< Tab isActive > { demoText . ordinals [ 1 ] } </ Tab >
</ Tabs >
Use scrollOffset to allow the Tabs to scroll from edge to edge in narrow screen sizes. Pass the same value used for page side paddings to scrollOffset.
First Second Third Fourth Fifth Sixth Seventh Eighth Ninth Tenth Eleventh Twelfth Thirteenth Fourteenth Fifteenth Sixteenth Seventeenth
< Tabs scrollOffset = " var(--livePreviewPadding) " >
{ demoText . ordinals . map ( ( title , index ) => (
< Tab isActive = { index === 0 } key = { index } > { title } </ Tab >
) ) }
</ Tabs >
Full tabs < Tabs hasFullTabs >
< Tab isActive > Full </ Tab >
< Tab > Width </ Tab >
< Tab > Tabs </ Tab >
</ Tabs >
With icons < >
< Tabs >
< Tab icon = { < SvgRecord /> } isActive > Tabs </ Tab >
< Tab icon = { < SvgArrowForward /> } > With </ Tab >
< Tab icon = { < SvgBell /> } > Icons </ Tab >
</ Tabs >
< Spacer bottom = " medium " />
< Tabs >
< Tab icon = { < SvgRecord /> } isActive > </ Tab >
< Tab icon = { < SvgArrowForward /> } > </ Tab >
< Tab icon = { < SvgBell /> } > </ Tab >
</ Tabs >
</ >
HTML tag Tabs can be rendered as button or a tags.
< >
< Tabs >
< Tab htmlTag = " a " isActive > Tabs </ Tab >
< Tab htmlTag = " a " href = " https://www.loom.com " > With </ Tab >
< Tab htmlTag = " a " > A </ Tab >
</ Tabs >
< Spacer bottom = " medium " />
< Tabs >
< Tab isActive > Tabs </ Tab >
< Tab > With </ Tab >
< Tab > Button </ Tab >
</ Tabs >
</ >
Examples With useState First Second Third
First content
( ) => {
const tabs = [
{ title : 'First' , content : 'First content' } ,
{ title : 'Second' , content : 'Second content' } ,
{ title : 'Third' , content : 'Third content' } ,
]
const [ activeTab , setActiveTab ] = React . useState ( tabs [ 0 ] )
return (
< >
< Tabs >
{ tabs . map ( ( tab , index ) => (
< Tab
key = { index }
isActive = { tab . title === activeTab . title }
onClick = { ( ) => setActiveTab ( tab ) }
>
{ tab . title }
</ Tab >
) ) }
</ Tabs >
< Spacer bottom = " medium " />
< Container
borderSide = " all "
padding = " medium "
>
{ activeTab . content }
</ Container >
</ >
)
}
With React Router Wrap the Tab component with React Router Link.
import { Link } from "react-router-dom"
< Tabs >
< Link to = " / " >
< Tab htmlTag = " span " isActive > Home </ Tab >
</ Link >
< Link to = " /about " >
< Tab htmlTag = " span " > About </ Tab >
</ Link >
</ Tabs >
Props Tabs scrollOffset
number | string
Tab htmlTag
'a' | 'button' | 'span'
'button'