public-ui-kolibri

import type { FC } from 'react'; import React from 'react'; import { KolHeading, KolTabs } from '@public-ui/react-v19'; import { SampleDescription } from '../SampleDescription'; const tabs = [ { _icons: 'codicon codicon-pie-chart', _label: 'First tab', _on: { onSelect: (event: Event) => { console.log('First tab selected', event); }, }, }, { _icons: 'codicon codicon-calendar', _label: 'Second Tab', }, { _disabled: true, _icons: 'codicon codicon-briefcase', _label: 'Disabled Tab', }, { _icons: 'codicon codicon-telescope', _label: 'Last tab', }, ]; export const TabsBehavior: FC = () => ( <> <SampleDescription> <p> This sample shows KolTabs with the property <code>_behavior</code> set to <code>select-manual</code> and <code>select-automatic</code>. </p> <p>This property allows controlling when an arrow key is pressed whether the tab change takes place right away or only focuses the tab caption.</p> </SampleDescription> <div className="grid gap-8"> <div className="grid gap-4"> <KolHeading _level={2} _label='Tabs with "select manual" behavior' /> <KolTabs _tabs={tabs} _behavior="select-manual" _label="Tabs with select manual behavior"> <div slot="tab-0">Contents of Tab 1</div> <div slot="tab-1">Contents of Tab 2</div> <div slot="tab-2">Contents of Tab 3</div> <div slot="tab-3">Contents of Tab 4</div> </KolTabs> </div> <div className="grid gap-4"> <KolHeading _level={2} _label='Tabs with "select automatic" behavior' /> <KolTabs _tabs={tabs} className="mt-4" _behavior="select-automatic" _label="Tabs with select automatic behavior"> <div slot="tab-0">Contents of Tab 1</div> <div slot="tab-1">Contents of Tab 2</div> <div slot="tab-2">Contents of Tab 3</div> <div slot="tab-3">Contents of Tab 4</div> </KolTabs> </div> </div> </> );