@bolttech/atoms-tab v0.13.1
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
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.
4 months ago
8 months ago
6 months ago
6 months ago
6 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago