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'