0.0.9 • Published 5 years ago
react-studio-tabs
A minimalistic react tab component that displays content in tabs. Some default stylings are included in the below link
Links
Tabs Props
| Name | Type | Descriptions |
|---|
| bemClassName? | string | Main bem class name |
| className? | string | Main element class name |
| ulClassName? | string | The class name of the ul list |
| liClassName? | string | The class name of the list element |
| contentClassName? | string | the class name of the tab content |
| initialTab? | number | Initial tab to be shown |
| onInitialTabChange? | currentIdx:number)=>void | Function that is being triggered when the initialTab is changed |
| afterTabChange? | (currentIdx:number, prevIdx:number)=>void | Function that is being triggered after the index is changed |
| onTabClicked? | (idx?:number, prevIdx?:number)=>void | Function that is being triggered when the tab indexed is being changed |
| isSeoFriendly? | boolean | If set to true the display of the current tab will be based on css styles instead of render options |
Tabs Default Props
| Name | Value |
|---|
| onTabClicked | ()=>{} |
| onInitialTabChange | ()=>{} |
| afterTabChange | ()=>{} |
| ulClassName | "" |
| className | "" |
| bemClassName | "tabs" |
| contentClassName | "" |
| liClassName | "" |
| isSeoFriendly | false |
Tab Props
| Name | Type | Descriptions |
|---|
| className? | string | Tab panel class name |
| title | string | React.ReactNode | The title name of the tab button |
Tab Default Props
Installation
$ npm install --save react-studio-tabs
Usage
import {Tabs, Tab} from "react-studio-tabs";
Simple Example
<Tabs>
<Tab title="one">One</Tab>
<Tab title="two">Two</Tab>
<Tab title="three">Three</Tab>
<Tab title="four">Four</Tab>
</Tabs>