Tab Component

The Tab component is a React component designed to provide a simple and customizable tab element. This component allows users to create interactive tab-based navigation.

Table of Contents

• Installation
• Usage
• Props
• Example
• Contributing

Installation

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

Installation

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

or

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

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

Usage

The Tab component provides a basic tab element that can be used within tab-based navigation. It supports customization through various props.

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

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

function App() {
  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Tab value="tab-1" dataTestId="my-tab">
        Tab 1
      </Tab>
      <Tab value="tab-2" dataTestId="my-tab" disabled>
        Tab 2 (Disabled)
      </Tab>
    </BolttechThemeProvider>
  );
}

export default App;

Props

The Tab component accepts the following props:

| Prop | Type | Description | |--------------|---------------|---------------------------------------------------| | id | string | The ID attribute of the tab element. | | dataTestId | string | The data-testid attribute for testing purposes. | | children | ReactNode | The content of the tab element. | | value | string | The value associated with the tab. | | disabled | boolean | Determines whether the tab is disabled. |

Example

Here's an example of using the Tab component:

<Tab value="tab-1" dataTestId="my-tab">
  Tab 1
</Tab>
<Tab value="tab-2" dataTestId="my-tab" disabled>
  Tab 2 (Disabled)
</Tab>

This will render two Tab components, one with the label "Tab 1" and another labeled "Tab 2 (Disabled)" that is disabled.

Contributing

Contributions to the Tab 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.