Tabs

Tabs are essential if you want to group together certain contents for better visuals in specific space in your page.

Usage

Following is how you can use Tab component:

import { Tab } from 'kodhus-ui-component';

const tabs = [
  { title: 'Tab 1', content: 'Tab content for tab 1' },
  { title: 'Tab 2', content: 'Tab content for tab 2' },
  { title: 'Tab 3', content: 'Tab content for tab 3' },
  { title: 'Tab 4', content: 'Tab content for tab 4' },
];
<Tab tabs={tabs} selected='0' align='right' />

By default, the tab labels are aligned to the left. You can set them to fill the whole width by setting align prop to 'center'.

Examples


Left aligned labels


Space in between


Right aligned labels