Overview content goes here.
Settings content goes here.
ids[string, ...string[]]children?ReactNodedefaultSelectedId?string|nullnullonChange?(id: string) => voidselectedId?string| Prop | Type | Default |
|---|---|---|
ids | [string, ...string[]] | - |
children? | ReactNode | - |
defaultSelectedId? | string|null | null |
onChange? | (id: string) => void | - |
selectedId? | string | - |
labelstringchildren?ReactNode| Prop | Type | Default |
|---|---|---|
label | string | - |
children? | ReactNode | - |
idstringchildren?ReactNode| Prop | Type | Default |
|---|---|---|
id | string | - |
children? | ReactNode | - |
idstringchildren?ReactNode| Prop | Type | Default |
|---|---|---|
id | string | - |
children? | ReactNode | - |
import { Tabs } from '@k8ordo/ui';<Tabs.Root ids={['overview', 'settings', 'history']}>
<Tabs.List label="Navigation">
<Tabs.Tab id="overview">Overview</Tabs.Tab>
<Tabs.Tab id="settings">Settings</Tabs.Tab>
<Tabs.Tab id="history">History</Tabs.Tab>
</Tabs.List>
<Tabs.Panel id="overview">
<p>Overview content goes here.</p>
</Tabs.Panel>
<Tabs.Panel id="settings">
<p>Settings content goes here.</p>
</Tabs.Panel>
<Tabs.Panel id="history">
<p>History content goes here.</p>
</Tabs.Panel>
</Tabs.Root><Tabs.Root
defaultSelectedId="settings"
ids={['overview', 'settings', 'history']}
>
<Tabs.List label="Navigation">
<Tabs.Tab id="overview">Overview</Tabs.Tab>
<Tabs.Tab id="settings">Settings</Tabs.Tab>
<Tabs.Tab id="history">History</Tabs.Tab>
</Tabs.List>
<Tabs.Panel id="overview">
<p>Overview content goes here.</p>
</Tabs.Panel>
<Tabs.Panel id="settings">
<p>Settings content goes here.</p>
</Tabs.Panel>
<Tabs.Panel id="history">
<p>History content goes here.</p>
</Tabs.Panel>
</Tabs.Root>