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-tabs
import { 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