Tabs

Tabs props

Name	Type	Description
activeTabKey	string \| number	Active tab number
children	React.ReactNode	Tabs
onChange	(ev: ChangeEvent) => void	Tabs change handler
shouldScrollTabs	boolean	Horizontal tabs scroll
tabContentNode	HTMLElement \| null	DOM-node to put tab content in
theme	PartialGlobalDefaultTheme[ typeof COMPONENTS_NAMESPACES.tabs ]	...
_[className]	[x: string]: unknown	E.g.: `_w-48` adds a css class `w-48` to the component's outer wrapper.

Tab props

Name	Type	Description
children	React.ReactNode	Tab content
isDisabled	boolean	In case you want the tab to be disabled
tabKey	string \| number	Tab number, should start from 0
theme	PartialGlobalDefaultTheme[ typeof COMPONENTS_NAMESPACES.tabs ]	...
title	string \| React.ReactNode	Tab title
_[className]	[x: string]: unknown	E.g.: `_w-48` adds a css class `w-48` to the component's outer wrapper.


() => {
  const [selected, setSelected] = React.useState(0);

  return (
    <L.Tabs
      activeTabKey={selected}
      onChange={(ev) => setSelected(ev.component.value)}
    >
      <L.Tab title={'Tab 1'} tabKey={0}>
        <div className='p-4'>Tab 1 content</div>
      </L.Tab>
      <L.Tab title={'Tab 2'} tabKey={1}>
        <div className='p-4'>Tab 2 content</div>
      </L.Tab>
      <L.Tab title={'Tab 3'} tabKey={2}>
        <div className='p-4'>Tab 3 content</div>
      </L.Tab>
    </L.Tabs>
  );
};