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 = " small " />
< 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 >
< Tabs >
< Tab isActive > Tabs </ Tab >
< Tab > With </ Tab >
< Tab > Button </ Tab >
</ Tabs >
</ >
Props Tabs Tab htmlTag
oneOf: 'a', 'button'
'button'