# Flex Element Tabs

`flex-element-tabs` is a lightweight and flexible JavaScript library for creating tabbed interfaces in web applications.

## Installation
Use the package manager [npm](https://www.npmjs.com/) to install flex-element-tabs.


```bash
npm install flex-element-tabs
```

```bash
import { TabsContainer, TabsItem } from "flex-element-tabs";
```


## Basic Example

```bash
       <TabsContainer active={1} containerClass="" itemClass="" headClass="">
        <TabsItem title="Title 1">
          <div>
           Sample Content 1
          </div>
        </TabsItem>
        <TabsItem title="Title 2">
          <div>
           Sample Content 2
          </div>
        </TabsItem>
        <TabsItem title="Title 3">
          <div>
           Sample Content 3
          </div>
        </TabsItem>
      </TabsContainer>

```
## Option

| Function             | Description                                                     | Type        |
| :--------------------| :-------------------------------------------------------------- | :---------- |
| active={}            | Default target open tab                                         | number      |
| containerClass=""    | You can define default classes for the main container.          | string      |
| itemClass=""         | You can make default style edits for tabs                       | string      |
| headClass=""         | You can make style edits for the tab container.                 | string      |
| title=""             | Space reserved for tab names. Supports Html objects (icon etc.) | any         |


## Other

To change tab locations, simply swap the TabsItem objects. The first one always represents the 1st tab