@personio/ui-docs
Version:
52 lines (42 loc) • 1.13 kB
text/mdx
---
name: Tab
menu: Components
route: /components/Tab
---
import { Playground, PropsTable } from 'docz'
import { Tab } from '@personio/ui-components'
import { State, Toggle } from 'react-powerplug'
# Tab
<PropsTable of={Tab} />
## Example
<Playground>
<div>
<State initial={{ value: 'personal' }}>
{({ state, setState }) => (
<Tab value={state.value} onChange={(value) => {
setState({ value })
}}>
<Tab.Item name="personal">Personal Data</Tab.Item>
<Tab.Item name="salary">Salary Data</Tab.Item>
<Tab.Item name="absences">Absences</Tab.Item>
</Tab>
)}
</State>
</div>
</Playground>
## Disabled
<Playground>
<div>
<State initial={{ value: 'personal' }}>
{({ state, setState }) => (
<Tab value={state.value} onChange={(value) => {
setState({ value })
}}>
<Tab.Item name="personal">Personal Data</Tab.Item>
<Tab.Item name="salary" disabled>Salary Data</Tab.Item>
<Tab.Item name="absences">Absences</Tab.Item>
</Tab>
)}
</State>
</div>
</Playground>