Usage

import { Tabs } from '@pillar-ui/core'

<Tabs />

Examples

Size

Default

4

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'

Home.

import { Size, Tab, TabList, TabPanel, Tabs } from '@pillar-ui/core'
import { Album, Heart, Home } from '@pillar-ui/icons'

function TabBase({ size }: { size: Size }) {
  return (
    <Tabs size={size}>
      <TabList>
        <Tab value={1} title="Home" icon={<Home />} />
        <Tab value={2} title="Gallery" icon={<Album />} />
        <Tab value={3} title="Favorites" icon={<Heart />} />
      </TabList>
      <TabPanel value={1}>Home.</TabPanel>
      <TabPanel value={2}>Gallery.</TabPanel>
      <TabPanel value={3}>Favorites.</TabPanel>
    </Tabs>
  )
}

export const TabsSize = () => {
  return (
    <>
      <TabBase size="1" />
      <TabBase size="2" />
      <TabBase size="4" />
      <TabBase size="5" />
      <TabBase size="6" />
      <TabBase size="7" />
      <TabBase size="8" />
      <TabBase size="9" />
    </>
  )
}

Variants

Default

default

Type

'default' | 'striped' | 'soft' | 'head-color'

Home.

import { Tab, TabList, TabPanel, Tabs, Variant } from '@pillar-ui/core'
import { Album, Heart, Home } from '@pillar-ui/icons'

function TabBase({ variant }: { variant: Variant | 'border' | 'group' }) {
  return (
    <Tabs variant={variant}>
      <TabList>
        <Tab value={1} title="Home" icon={<Home />} />
        <Tab value={2} title="Gallery" icon={<Album />} />
        <Tab value={3} title="Favorites" icon={<Heart />} />
      </TabList>
      <TabPanel value={1}>Home.</TabPanel>
      <TabPanel value={2}>Gallery.</TabPanel>
      <TabPanel value={3}>Favorite.</TabPanel>
    </Tabs>
  )
}

export const TabsVariant = () => {
  return (
    <>
      <TabBase variant="border" />
      <TabBase variant="group" />
      <TabBase variant="outline" />
      <TabBase variant="soft" />
      <TabBase variant="solid" />
    </>
  )
}

Color

Default

p

Type

'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b'

Home.

import { Color, Tab, TabList, TabPanel, Tabs } from '@pillar-ui/core'
import { Album, Heart, Home } from '@pillar-ui/icons'

function TabBase({ color }: { color: Color }) {
  return (
    <Tabs color={color}>
      <TabList>
        <Tab value={1} title="Home" icon={<Home />} />
        <Tab value={2} title="Gallery" icon={<Album />} />
        <Tab value={3} title="Favorites" icon={<Heart />} />
      </TabList>
      <TabPanel value={1}>Home.</TabPanel>
      <TabPanel value={2}>Gallery.</TabPanel>
      <TabPanel value={3}>Favorite.</TabPanel>
    </Tabs>
  )
}

export const TabsColor = () => {
  return (
    <>
      <TabBase color="b" />
      <TabBase color="d" />
      <TabBase color="i" />
      <TabBase color="p" />
      <TabBase color="se" />
      <TabBase color="su" />
      <TabBase color="w" />
    </>
  )
}

Corner

Default

p

Type

'0' | '1' | '2' | '3' | '4' | '5' | 'full'

Home.

import { Tab, TabList, TabPanel, Tabs, Corner } from '@pillar-ui/core'
import { Album, Heart, Home } from '@pillar-ui/icons'

function TabBase({ corner }: { corner: Corner }) {
  return (
    <Tabs variant="group">
      <TabList corner={corner}>
        <Tab value={1} title="Home" icon={<Home />} />
        <Tab value={2} title="Gallery" icon={<Album />} />
        <Tab value={3} title="Favorites" icon={<Heart />} />
      </TabList>
      <TabPanel value={1}>Home.</TabPanel>
      <TabPanel value={2}>Gallery.</TabPanel>
      <TabPanel value={3}>Favorite.</TabPanel>
    </Tabs>
  )
}

export const TabsCorner = () => {
  return (
    <>
      <TabBase corner="0" />
      <TabBase corner="1" />
      <TabBase corner="2" />
      <TabBase corner="3" />
      <TabBase corner="4" />
      <TabBase corner="5" />
      <TabBase corner="full" />
    </>
  )
}

Disabled

Default

-

Type

boolean

Home.

import { Tab, TabList, TabPanel, Tabs } from '@pillar-ui/core'
import { Album, Heart, Home } from '@pillar-ui/icons'

export const TabsDisabled = () => {
  return (
    <Tabs>
      <TabList>
        <Tab value={1} title="Home" icon={<Home />} />
        <Tab disabled value={2} title="Gallery" icon={<Album />} />
        <Tab value={3} title="Favorites" icon={<Heart />} />
      </TabList>
      <TabPanel value={1}>Home.</TabPanel>
      <TabPanel value={2}>Gallery.</TabPanel>
      <TabPanel value={3}>Favorite.</TabPanel>
    </Tabs>
  )
}