1.1.2 • Published 5 years ago
rtabs v1.1.2
rtabs
A simple and minimal tab component for react.

Quickstart
To start using rtabs
1. Install
npm install rtabs
yarn add rtabs2. Import necessary components from rtabs
import { Tabs, Tab, TabTitle, TabContent } from "rtabs";3. Add Tab components inside Tabs
import React from "react";
import { Tabs, Tab, TabTitle, TabContent } from "rtabs";
function ReactTabs() {
return (
<div>
<Tabs>
<Tab>
<TabTitle>Tab Title 01</TabTitle>
<TabContent>Tab Content 01</TabContent>
</Tab>
<Tab>
<TabTitle>Tab Title 02</TabTitle>
<TabContent>Tab Content 02</TabContent>
</Tab>
<Tab>
<TabTitle>Tab Title 03</TabTitle>
<TabContent>Tab Content 03</TabContent>
</Tab>
<Tab>
<TabTitle>Tab Title 04</TabTitle>
<TabContent>Tab Content 04</TabContent>
</Tab>
</Tabs>
</div>
);
}
export default ReactTabs;Configurations
A configuratio object can be passed to <Tabs/> component.
<Tabs config={{}}>
<Tab>
<TabTitle>Tab Title 01</TabTitle>
<TabContent>Tab Content 01</TabContent>
</Tab>
</Tabs>Properties
| Property | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| layout | Layout of tabs | String | horizontal,vertical | horizontal |
| alignTitles | Alignment of Tab Titles | String | left,middle,right | left |
| activeColor | Active tab underline color | String | black , #eee (Any hex/rgb or rgba value) | black |