Tabs

Allows user to make it easy explore and switch between different views.

version

4.4.1

install

yarn add @welcome-ui/tabs

usage

import { Tabs, useTabState } from '@welcome-ui/tabs'

View package View source

About #

See Reakit for documentation.

Default #

Set the tab activated by default using selectedId on useTabState.


function() {
  const tab = useTabState({ selectedId: 'tab1' })

  return (
    <>
      <Tab.List aria-label="Tabs" {...tab}>
        <Tab {...tab} id="tab1">
          Tab 1
        </Tab>
        <Tab {...tab} id="tab2">
          Tab 2
        </Tab>
        <Tab {...tab} id="tab3">
          Tab 3
        </Tab>
        <Tab {...tab} id="tab4">
          Tab 4
        </Tab>
        <Tab {...tab} disabled id="tab5">
          Tab 5
        </Tab>
      </Tab.List>
      <Tab.Panel {...tab} tabId="tab1">
        Tab.Panel 1
      </Tab.Panel>
      <Tab.Panel {...tab} tabId="tab2">
        Tab.Panel 2
      </Tab.Panel>
      <Tab.Panel {...tab} tabId="tab3">
        Tab.Panel 3
      </Tab.Panel>
      <Tab.Panel {...tab} tabId="tab4">
        Tab.Panel 4
      </Tab.Panel>
      <Tab.Panel {...tab} disabled tabId="tab5">
        Tab.Panel 5
      </Tab.Panel>
    </>
  )
}

With no border #

The border on Tab.List is an inset shadow that you can customize or disable via the boxShadow style prop


function() {
  const tab = useTabState({ selectedId: 'tab1' })

  return (
    <>
      <Tab.List aria-label="Tabs" boxShadow="none" {...tab}>
        <Tab {...tab} id="tab1">
          Tab 1
        </Tab>
        <Tab {...tab} id="tab2">
          Tab 2
        </Tab>
        <Tab {...tab} id="tab3">
          Tab 3
        </Tab>
        <Tab {...tab} id="tab4">
          Tab 4
        </Tab>
        <Tab {...tab} disabled id="tab5">
          Tab 5
        </Tab>
      </Tab.List>
      <Tab.Panel {...tab} tabId="tab1">
        Tab.Panel 1
      </Tab.Panel>
      <Tab.Panel {...tab} tabId="tab2">
        Tab.Panel 2
      </Tab.Panel>
      <Tab.Panel {...tab} tabId="tab3">
        Tab.Panel 3
      </Tab.Panel>
      <Tab.Panel {...tab} tabId="tab4">
        Tab.Panel 4
      </Tab.Panel>
      <Tab.Panel {...tab} disabled tabId="tab5">
        Tab.Panel 5
      </Tab.Panel>
    </>
  )
}

With a badge #

Add badges in tab.


function() {
  const tab = useTabState({ selectedId: 'tab2' })
  const getVariant = item => (tab.selectedId === item ? 'primary' : 'default')

  return (
    <>
      <Tab.List aria-label="Tabs" {...tab}>
        <Tab {...tab} id="tab1">
          Tab 1
          <Badge ml="xs" variant={getVariant('tab1')}>
            new
          </Badge>
        </Tab>
        <Tab {...tab} id="tab2">
          Tab 2
          <Badge ml="xs" variant={getVariant('tab2')}>
            old
          </Badge>
        </Tab>
        <Tab {...tab} id="tab3">
          Tab 3
        </Tab>
      </Tab.List>
      <Tab.Panel {...tab} tabId="tab1">
        Tab.Panel 1
      </Tab.Panel>
      <Tab.Panel {...tab} tabId="tab2">
        Tab.Panel 2
      </Tab.Panel>
      <Tab.Panel {...tab} tabId="tab3">
        Tab.Panel 3
      </Tab.Panel>
    </>
  )
}

Use another component #

Use another component in tab.


function() {
  const tab = useTabState({ selectedId: 'tab1' })

  return (
    <>
      <Tab.List aria-label="Tabs" {...tab}>
        <Tab {...tab} as="a" id="tab1">
          Tab 1
        </Tab>
        <Tab {...tab} as="a" id="tab2">
          Tab 2
        </Tab>
        <Tab {...tab} as="a" id="tab3">
          Tab 3
        </Tab>
      </Tab.List>
      <Tab.Panel {...tab} tabId="tab1">
        Tab.Panel 1
      </Tab.Panel>
      <Tab.Panel {...tab} tabId="tab2">
        Tab.Panel 2
      </Tab.Panel>
      <Tab.Panel {...tab} tabId="tab3">
        Tab.Panel 3
      </Tab.Panel>
    </>
  )
}

One tab #

Active bar doesn't display with only one tab.


function() {
  const tab = useTabState({ selectedId: 'tab1' })

  return (
    <>
      <Tab.List aria-label="Tabs" {...tab}>
        <Tab {...tab} id="tab1">
          Tab 1
        </Tab>
      </Tab.List>
      <Tab.Panel {...tab} tabId="tab1">
        Tab.Panel 1
      </Tab.Panel>
    </>
  )
}

Vertical #

Set the tab orientation by providing the orientation prop to the tab state


function() {
  const tab = useTabState({ orientation: 'vertical', selectedId: 'tab2' })

  return (
    <Box display="flex">
      <Tab.List w={200} mr="lg" aria-label="Tabs" {...tab}>
        <Tab {...tab} id="tab1">
          Tab 1
        </Tab>
        <Tab {...tab} id="tab2">
          Tab 2
        </Tab>
        <Tab {...tab} id="tab3">
          Tab 3
        </Tab>
        <Tab {...tab} id="tab4">
          Tab 4
        </Tab>
      </Tab.List>
      <Tab.Panel {...tab} tabId="tab1">
        Tab.Panel 1
      </Tab.Panel>
      <Tab.Panel {...tab} tabId="tab2">
        Tab.Panel 2
      </Tab.Panel>
      <Tab.Panel {...tab} tabId="tab3">
        Tab.Panel 3
      </Tab.Panel>
      <Tab.Panel {...tab} tabId="tab4">
        Tab.Panel 4
      </Tab.Panel>
    </Box>
  )
}

Properties #

Tab #

Name	Type(s)	Default	Required
manual	Boolean Whether the tab selection should be manual.
panels	Item[] Lists all the panels.
selectedId	string The current selected tab's `id`.
select	(id: string) => void Moves into and selects a tab by its `id`.

Tab.List #

Name	Type(s)	Default	Required
selectedId	string The current selected tab's `id`.

Tab.Panel #

Name	Type(s)	Default	Required
selectedId	string The current selected tab's `id`.
registerPanel	(item: Item) => void Registers a tab panel.
unregisterPanel	(id: string) => void Unregisters a tab panel.
panels	Item[] Lists all the panels.

Packages #

Dependencies #

@welcome-ui/system [^4.2.0]

@welcome-ui/utils [^4.2.0]

react-flatten-children [^1.0.0]

reakit [^1.3.11]

Peer dependencies #

@xstyled/styled-components [^3.6.0]

react [^16.10.2 || ^17.0.1 || ^18.0.0]

styled-components [^5.3.3]

Pagination

Emoji