TabPanel Component

The TabPanel component is a React component designed to provide a container for tab content. This component is used in conjunction with tabs to display relevant content for the selected tab.

Table of Contents

• Installation
• Usage
• Props
• Example
• Contributing

Installation

To use the TabPanel component in your React application, follow these steps:

Installation

npm install @bolttech/frontend-foundations @bolttech/atoms-tab @bolttech/atoms-tab-panel

or

yarn add @bolttech/frontend-foundations @bolttech/atoms-tab @bolttech/atoms-tab-panel

Once you have the required dependencies installed, you can start using the TabPanel component in your React application.

Usage

The TabPanel component provides a container for tab content. It works alongside tab components to display the content associated with the selected tab.

To use the component, import it and include it in your JSX:

import React, {useState} from 'react';
import {Tab} from '@bolttech/atoms-tab';
import {TabPanel} from '@bolttech/atoms-tab-panel';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations";

function App() {
  const [selectedTab, setSelectedTab] = useState('tab-1');

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Tab value="tab-1" dataTestId="my-tab" onClick={() => setSelectedTab('tab-1')}>
        Tab 1
      </Tab>
      <Tab value="tab-2" dataTestId="my-tab" onClick={() => setSelectedTab('tab-2')}>
        Tab 2
      </Tab>

      <TabPanel value="tab-1" selectedValue={selectedTab} dataTestId="my-tab-panel">
        Content for Tab 1
      </TabPanel>
      <TabPanel value="tab-2" selectedValue={selectedTab} dataTestId="my-tab-panel">
        Content for Tab 2
      </TabPanel>
    </BolttechThemeProvider>
  );
}

export default App;

Props

The TabPanel component accepts the following props:

| Prop | Type | Description | |----------------|---------------|-------------------------------------------------------| | value | string | The value associated with the tab panel. | | selectedValue | string | The value of the selected tab. | | id | string | The ID attribute of the tab panel element. | | dataTestId | string | The data-testid attribute for testing purposes. | | children | ReactNode | The content of the tab panel. |

Example

Here's an example of using the TabPanel component:

<TabPanel value="tab-1" selectedValue={selectedTab} dataTestId="my-tab-panel">
  Content for Tab 1
</TabPanel>
<TabPanel value="tab-2" selectedValue={selectedTab} dataTestId="my-tab-panel">
  Content for Tab 2
</TabPanel>

This will render two TabPanel components with content that is displayed based on the selected tab.

Contributing

Contributions to the TabPanel component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's Bitbucket repository.