Tabs are used to divide content into sections and let the user navigate between one section at a time. Use tabs when the content is at the same level of the hierarchy and are related. It should always be one tab selected by default.
Tabs with more than 6 options should be avoided and never fewer than 2 tabs.
Keep the option label name of a tab short, descriptive and unique. Should not be any longer than two words.
- items ([string]) [required] - Items getting converted to tabs.
- value (number) - Index of selected tab.
- valueOnChange (function) - Gets called every time the value is changed.
import { Tabs } from '@elvia/elvis-tabs/react';
<Tabs
items={items}
value={selectedValue}
valueOnChange={setSelectedValue}
></Tabs>
import '@elvia/elvis-tabs';
<elvia-tabs
[items]="items"
[value]="value"
(valueOnChange)="value = $event.detail.value"
></elvia-tabs>