Tabs - Type A

This is a tabs component. Tabs make it easy to switch between different views.

[Note]:- There is also another type of tabs component called TabsTypeB component.

Props

Props	Type	Required	Description
tabsData	Array<TabsDataProps>	Yes	It is an array of TabsDataProps objects
tabHandler	function (index: number) => void	Yes	If you want to do something on switching tabs, then you can do it by passing the tabHandler function
defaultActiveKey	number	No	The number that you pass in defaultActiveKey will set the corresponding tab as active tab by default

TabsDataProps

Props	Type	Required	Description
key	string	Yes	Used for unique identification of a node in the array
label	string	Yes	Tab label
children	ReactNode	Yes	The content that will be shown when the tab is active

http://localhost:3000

Tab 1

Tab 2

Tab 3

Dummy Component-1

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

src/components/ExampleTabs/index.tsx

import {
  TabsTypeA,
  TabsDataProps,
  DummyComponent1,
  DummyComponent3,
} from "canary-design";

const tabsData: TabsDataProps[] = [
  {
    key: "1",
    label: "Tab 1",
    children: <DummyComponent1 />,
  },
  {
    key: "2",
    label: "Tab 2",
    children: "Tab2 content is shown here.",
  },
  {
    key: "3",
    label: "Tab 3",
    children: <DummyComponent3 />,
  },
];

const ExampleTabsTypeA = () => {
  const tabHandler = (index: number) => {
    console.log(`active tab index: ${index}`);
  };

  return (
    <TabsTypeA
      tabsData={tabsData}
      tabHandler={tabHandler}
      defaultActiveKey={1}
    />
  );
};

export { ExampleTabsTypeA };