@bolttech/atoms-tab

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.