Tabs

The RhTabs custom component is a user interface element that displays a collection of tabs or sections, where only one section can be active at a time.

Usage

Once installed, you can import the RhTabs component into your React application:

copy

import {RhTabs} from "@rhythm-ui/react"

Then, you can use the RhTabs component in your JSX code:

Underline

The variant is set to underline which renders the tabs with an underline.

copy

<RhTabs
  variant="underline"
  stretched={false}
  vertical={false}
  onTabClick={(value) => {
    console.debug(value);
  }}
>
  <RhTabsItem title="My Account" value="1" />
  <RhTabsItem title="Company" value="2" />
  <RhTabsItem title="Team Members" value="3" />
  <RhTabsItem title="Billing" value="4" />
</RhTabs>

Tabs Props

Name	Type	Default	Description
variant	"outline" \| "underline" \| "pills" \| "bar"	underline	Variant prop accepts the value as a string. We can send 4 types of variant props. Those are 'underline', 'pill', 'outline', 'bar' Default value is 'underline'.
stretched	boolean	false	Stretched prop accepts a boolean value. If the value is true, the tab will take all the remaining spaces.
vertical	boolean	false	Vertical prop accepts a value as a boolean. You will get a vertical tab if the value is true.
streak	boolean		Streak accepts the value as a boolean. If given true, the tab will have underlined style.
defaultActiveSection	any		DefaultActiveSection prop accepts any type of value. But this value should be from the 'value' prop of RhTabsItem only.
onTabClick	(tabValue: any) => void		OnTabClick prop accepts a value as a function. This function receives a value that denotes a particular RhTabItem
children	React.ReactElement[]		Child component of RhTab

TabsItem Props

Name	Type	Default	Description
title	string		Title prop accepts the value as a string. You need to provide a title for each RhTabsItem This is a must-prop that should be there.
icon	string		Icon prop accepts the value as a string. You need to provide an icon string from iconify. This is an optional prop.
iconPosition	string		IconPosition prop accepts the value as a string. It could be either 'left' or 'right'. This is an optional prop with the default value as 'left'.
isDisable	boolean		IsDisable prop accepts the value as a boolean. If given 'true', that particular tab will be disabled. This is an optional prop with the default value as 'false'.
value	any		Value prop accepts any type of value. This is a must value of RhTabsItem. Whatever value you give to this prop for each RhTabsItem, you have to give the value to 'defaultActiveSection' prop of RhTab from these values only.
sectionType	string	underline	Not for user
sectionValue	any	0	Not for user
tabId	number	0	Not for user
onSecClick	(id: number, openedSectionValue: any, value: any, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void		Not for user
openedSectionValue	any	0	Not for user

Variant

The variant provides an easy-to-use and customizable way to display multiple sections of content in a tabbed interface with a horizontal bar highlighting the active tab.

copy

<div className={"flex flex-col gap-4"}>
  <RhTabs
    variant="bar"
    onTabClick={(value) => {
      console.debug(value);
    }}
  >
    <RhTabsItem title="My Account" value="1" />
    <RhTabsItem title="Company" value="2" />
    <RhTabsItem title="Team Members" value="3" />
    <RhTabsItem title="Billing" value="4" />
  </RhTabs>
  <RhTabs
    variant="pills"
    onTabClick={(value) => {
      console.debug(value);
    }}
  >
    <RhTabsItem title="My Account" value="1" />
    <RhTabsItem title="Company" value="2" />
    <RhTabsItem title="Team Members" value="3" />
    <RhTabsItem title="Billing" value="4" />
  </RhTabs>
  <RhTabs
    variant="outline"
    onTabClick={(value) => {
      console.debug(value);
    }}
  >
    <RhTabsItem title="My Account" value="1" />
    <RhTabsItem title="Company" value="2" />
    <RhTabsItem title="Team Members" value="3" />
    <RhTabsItem title="Billing" value="4" />
  </RhTabs>
</div>

Streched

The stretched prop provides an easy-to-use and customizable way to display multiple sections of content in a tabbed interface that can either stretch to fill the available width or take up only as much space as necessary.

copy

<RhTabs
  variant="pills"
  stretched={true}
  vertical={false}
  onTabClick={(value) => {
    console.debug(value);
  }}
>
  <RhTabsItem title="My Account" value="1" />
  <RhTabsItem title="Company" value="2" />
  <RhTabsItem title="Team Members" value="3" />
  <RhTabsItem title="Billing" value="4" />
</RhTabs>

Left Tab Icon

The iconPosition prop accepts a value as a string. It could be either left or right. This is an optional prop with a default value as left.

copy

<RhTabs
  variant="pills"
  stretched={true}
  vertical={false}
  onTabClick={(value) => {
    console.debug(value);
  }}
>
  <RhTabsItem
    title="My Account"
    icon="ri:customer-service-fill"
    iconPosition="left"
    value="1"
  />
  <RhTabsItem
    title="Company"
    icon="ri:stack-fill"
    iconPosition="left"
    value="2"
  />
  <RhTabsItem
    title="Team Members"
    icon="ri:chat-3-fill"
    iconPosition="left"
    value="3"
  />
  <RhTabsItem
    title="Billing"
    icon="ri:bug-2-line"
    iconPosition="left"
    value="4"
  />
</RhTabs>

Right Tab Icon

The iconPosition prop can be set to right to display the icon to the right of the label.

copy

<RhTabs
  variant="pills"
  stretched={true}
  vertical={false}
  onTabClick={(value) => {
    console.debug(value);
  }}
>
  <RhTabsItem
    title="My Account"
    icon="ri:customer-service-fill"
    iconPosition="right"
    value="1"
  />
  <RhTabsItem
    title="Company"
    icon="ri:stack-fill"
    iconPosition="right"
    value="2"
  />
  <RhTabsItem
    title="Team Members"
    icon="ri:chat-3-fill"
    iconPosition="right"
    value="3"
  />
  <RhTabsItem
    title="Billing"
    icon="ri:bug-2-line"
    iconPosition="right"
    value="4"
  />
</RhTabs>

Vertical

The vertical prop provides an easy-to-use and customizable way to display multiple sections of content in a tabbed interface that can either be displayed horizontally or vertically.

copy

<RhTabs
  variant="underline"
  stretched={false}
  vertical={true}
  onTabClick={(value) => {
    console.debug(value);
  }}
>
  <RhTabsItem title="My Account" value="1" />
  <RhTabsItem title="Company" value="2" />
  <RhTabsItem title="Team Member" value="3" />
  <RhTabsItem title="Billing" isDisable={true} value="4" />
</RhTabs>

Disabled

When isDisable prop of RhTabsItem is set to true, the tab will be disabled and cannot be clicked.

copy

<RhTabs
  variant="underline"
  stretched={false}
  vertical={false}
  onTabClick={(value) => {
    console.debug(value);
  }}
>
  <RhTabsItem title="My Account" value="1" />
  <RhTabsItem title="Company" value="2" />
  <RhTabsItem title="Team Member" value="3" />
  <RhTabsItem title="Billing" isDisable={true} value="4" />
</RhTabs>

Default Active Tab

The defaultActiveSection prop accepts any type of value. But this value should be from the value prop of RhTabsItem only.

copy

<RhTabs
  defaultActiveSection="3"
  variant="underline"
  stretched={false}
  vertical={false}
  onTabClick={(value) => {
    console.debug(value);
  }}
>
  <RhTabsItem title="My Account" value="1" />
  <RhTabsItem title="Company" value="2" />
  <RhTabsItem title="Team Members" value="3" />
  <RhTabsItem title="Billing" value="4" />
</RhTabs>