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 to install flex-element-tabs.
npm install flex-element-tabsimport { TabsContainer, TabsItem } from "flex-element-tabs";Basic Example
<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