Tab Menu

Tab menu is a component that allows users to select an option from a list of options. This components have 2 options that you use.

Original : You can use the components Tab that is original that you can craft by yourself.
Ready made : This ready made component is a combination of original one and you can just use the json to pass the options to the component.

This components. Store at src/components/atoms/tabMenu and src/components/molecules/tabMenu

Basic ready made example

This is the basic example of how to use the Tab menu. This is an example of the ready made one. Below will be the original one that you can craft by yourself.

ExampleCode

PriceAboutSpecifications

Price of our system.

Options

The options are the items that will be displayed in the tab menu. You can pass an array of objects to the options prop. Each object will be used to create a tab menu item. The object should have the following properties:

type : Type of the item. It can be "custom", "divider", or "default". If it a divider it will auto use divider. And if you use custom it will use the label as a content.
label : Label that will be displayed on the button.

Option interface

1interface TabMenuItemProps {
2  label: React.ReactNode;
3  value: any;
4}

Options example

1options = [
2  {
3    label: "Price",
4    value: 1,
5  },
6  {
7    label: "About",
8    value: 2,
9  },
10  {
11    label: "Specifications",
12    value: 3,
13  },
14];

Attribute

id: string; This is the id of the tab menu.
options: Array<{ value: any; label: any }> (required); This is the options that will be shown in the tab menu.
value: any; This is the value of the tab menu.
onChange: Function; This is the function that will be called when the value of the tab menu is changed.
className: string; This is the className of the tab menu.
tabClassName: string; This is the className of the tab menu.

Basic original example

This is the basic example of how to use the original tab menu. This section will teach you how to use the tab menu component part by part. There are 2 parts of the tab menu component.

TabGroup : This is the main component that will hold the tab menu and the tab content.
Tab : This is the component that will be used to create the tab menu. Just like the radio group.

ExampleCode

Tab number 1Tab number 2Tab number 3

Term of service

Privacy statement