Skip to content
Sancho UI
Toggle dark mode
Getting started
Built with ☕ by
Ben McMahen

Tabs

Provide a tabbed interface, similar to that found in Material-UI.

Sancho exports the following components to create tabbed interfaces:

  • Tabs: The wrapper component for a number of Tab children.
  • Tab: An clickable tab item.
  • TabIcon: Use an icon as a tab.
  • TabPanel: Where an individual tab panel is rendered.
  • TabContent: An animated container for tab panels.

Basic usage

For accessibility purposes you should provide a unique id to each tab. That id should correspond to the id of the appropriate tab container. If the tabs extend beyond the viewport they will scroll horizontally.

<div className="Tabs-example">
  <Component initialState={{ value: 0 }}>
    {({ state, setState }) => (
      <Tabs value={state.value} onChange={i => setState({ value: i })}>
        <Tab id="you">For you</Tab>
        <Tab id="sports">Sports</Tab>
        <Tab id="entertainment">Entertainment</Tab>
        <Tab id="news">News</Tab>
        <Tab id="about">About</Tab>
      </Tabs>
    )}
  </Component>
</div>

Sliding content

Sliding content is a nice option when working with smaller panels or mobile applications.

Twitter
What's up, you!
<Layer className="Tabs-sliding">
  <Toolbar compressed className="Tabs-toolbar">
    <Text variant="h5">Twitter</Text>
  </Toolbar>
  <Component initialState={{ value: 0 }}>
    {({ state, setState }) => (
      <React.Fragment>
        <div className="Tabs-example">
          <Tabs dark value={state.value} onChange={i => setState({ value: i })}>
            <Tab id="you">For you</Tab>
            <Tab id="sports">Sports</Tab>
            <Tab id="entertainment">Entertainment</Tab>
            <Tab id="news">News</Tab>
            <Tab id="about">About</Tab>
          </Tabs>
        </div>
        <Pager
          value={state.value}
          onRequestChange={i => setState({ value: i })}
        >
          <TabPanel id="you" className="Tab-panel">
            <Text>What's up, you!</Text>
          </TabPanel>
          <TabPanel id="sports" className="Tab-panel">
            <Text>Sport is fun</Text>
          </TabPanel>
          <TabPanel id="entertainment" className="Tab-panel">
            <Text>We don't need no education</Text>
          </TabPanel>
          <TabPanel id="news" className="Tab-panel">
            <Text>No news is good news</Text>
          </TabPanel>
          <TabPanel id="fun" className="Tab-panel">
            <Text>About what?</Text>
          </TabPanel>
        </Pager>
      </React.Fragment>
    )}
  </Component>
</Layer>

With anchors

<div className="Tabs-example">
  <Component initialState={{ value: 0 }}>
    {({ state, setState }) => (
      <Tabs
        dark
        variant="evenly-spaced"
        value={state.value}
        onChange={i => setState({ value: i })}
      >
        <Tab component="a" href="#yup">
          I will
        </Tab>
        <Tab component="a" href="#another">
          Take you places
        </Tab>
        <Tab component="a" href="#another">
          You ain't never
        </Tab>
        <Tab component="a" href="#another">
          Been
        </Tab>
      </Tabs>
    )}
  </Component>
</div>

Evenly spaced

The evenly-spaced variant is sometimes a nice option and works particularly well when utilizing icons. The tabs will scroll horizontally if overflowing.

<div className="Tabs-example ">
  <Component initialState={{ value: 0 }}>
    {({ state, setState }) => (
      <Tabs
        dark
        variant="evenly-spaced"
        value={state.value}
        onChange={i => setState({ value: i })}
      >
        <Tab>For you</Tab>
        <Tab>Sports</Tab>
        <Tab>Entertainment</Tab>
        <Tab>News</Tab>
        <Tab>Fun</Tab>
      </Tabs>
    )}
  </Component>
</div>

With icons

You can use the TabIcon component to create mobile style tab bars.

<div className="Tabs-example icons">
  <div />
  <Component initialState={{ value: 0 }}>
    {({ state, setState }) => (
      <Tabs
        variant="evenly-spaced"
        value={state.value}
        slider={false}
        onChange={i => setState({ value: i })}
      >
        <Tab>
          <TabIcon icon={<IconUmbrella />} label="Annotation" />
        </Tab>
        <Tab>
          <TabIcon icon={<IconTrash />} label="Chat" />
        </Tab>
        <Tab>
          <TabIcon icon={<IconArchive />} label="Box" />
        </Tab>
        <Tab>
          <TabIcon icon={<IconAperture />} label="Camera" />
        </Tab>
        <Tab>
          <TabIcon icon={<IconActivity />} label="Chart" />
        </Tab>
      </Tabs>
    )}
  </Component>
</div>

API

Tabs
value*number
The currently selected index
sliderboolean
Toggle slider visibiliby
variant"default" | "evenly-spaced"
Whether tabs should be left-aligned or justified
onChange*(value: number) => void
Change callback to control which tab is selected
children*ReactElement<TabProps, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> | ... 14 more ... | (ReactElement<...>[] & ReactPortal)
Tab elements
animationConfigSpringConfig
spring animation configuration
Tab
children*ReactNode
The text content of the tab
onPressOnPressFunction
id*string
The id of the tab to be shared with TabContent
componentReactType<any>
badgeReactNode
An optional badge
refRef<HTMLButtonElement>
onParentSelect() => void
isActiveboolean
TabPanel
id*string
The id should correspond to the id given to the associated Tab
TabIcon
icon*ReactNode
label*string
sizeIconSizes