React
Is new design vision part implemented using new tokens?
React
Is new design vision part implemented using new tokens?
import { TabGroup, Tab } from '@optimus-web/core';
import { IconName } from '@optimus-web/icons';
<TabGroup activeTabValue="1" onTabClick={() => {}} inline underline showDivider={false}>
<Tab id="1" value="1" label="First" icon={IconName.Profile} notificationsCount={23} />
<Tab id="2" value="2" label="No badge" icon={IconName.Occupancy} notificationsCount={0} />
<Tab id="3" value="3" label="Third" icon={IconName.Companies} notificationsCount={6} />
<Tab id="4" value="4" label="Disabled" icon={IconName.Features} disabled notificationsCount={16} />
<Tab id="5" value="5" label="Simple" />
</TabGroup>
Name |
Description |
Type |
Default |
---|---|---|---|
activeTabValue? |
Set the active tab based on its value prop |
T |
undefined |
children |
Array of Tab elements |
Array<ReactElement<TabProps>> | ReactElement<TabProp> |
- |
inline? |
Tabs use only the needed space. If false Tabs expand and use all the parent available space. |
boolean |
undefined |
underline? |
Renders an underline for each Tab. Active tab is always underlined. |
boolean |
true |
showDivider? |
Renders a parent full-width divider only for inlined Tabs |
boolean |
false |
className? |
Adds a className to the Slider ol element |
string |
undefined |
onTabClick? |
Callback for Tab click event |
(event: MouseEvent<HTMLElement>, value: T) => void |
undefined |
Name |
Description |
Type |
Default |
---|---|---|---|
label |
Text for the Tab |
string |
- |
value |
Unique value for each Tab |
string |
- |
id |
Unique id for each Tab |
string |
- |
active? |
Defines which Tab is active |
boolean |
undefined |
icon? |
Renders an icon before the label |
IconName |
undefined |
inline? |
Tabs use only the needed space. If false Tabs expand and use all the parent available space. |
boolean |
undefined |
underline? |
Renders an underline for each Tab |
boolean |
true |
notificationsCount? |
Renders a Badge with a count in it at the right of the label |
number |
undefined |
onClick? |
Callback for Tab click event |
(event: MouseEvent<HTMLButtonElement>, value: string) => void |
undefined |
forwardedRef? |
Adds a Ref to the Tab component |
Ref<HTMLButtonElement> |
undefined |
showDivider? |
Renders a parent full-width divider only for inlined Tabs |
boolean |
false |
disabled? |
Defines if the Tab should render disabled |
boolean |
false |