TabContext

Holds the selected value for a TabList and the TabPanels beside it, wherever they sit - the tabs in a toolbar, the panels further down the page.

Source

Holds the selected value for a TabList and the TabPanels beside it, wherever they sit - the tabs in a toolbar, the panels further down the page. It renders nothing of its own.

<TabContext defaultValue="layers">
  <TabList aria-label="Left panel">
    <Tab value="layers" label="Layers" />
    <Tab value="assets" label="Assets" />
  </TabList>
  <TabPanel value="layers">...</TabPanel>
  <TabPanel value="assets">...</TabPanel>
</TabContext>

Demos

For usage examples, visit the component demo page: Tabs

Import

import { TabContext } from '@soroush.tech/design-system/Tabs'

Props

Prop	Type	Default	Description
`value`	`string \| number \| null`	-	The selected tab's value. Controlled with `onChange`.
`defaultValue`	`string \| number \| null`	`null`	The selected tab's value at first.
`onChange`	`(value: string \| number) => void`	-	Fired with a tab's value when it is chosen.

Source code

If this page does not answer your question, have a look at the implementation of the component for more detail.