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