1.1.2 • Published 4 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 rtabs
2. 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 |