1.1.2 • Published 4 years ago

rtabs v1.1.2

Weekly downloads
6
License
MIT
Repository
github
Last release
4 years ago

rtabs

github starts github issues live demo

A simple and minimal tab component for react.

rtabs demo

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

PropertyDescriptionTypeAccepted ValuesDefault
layoutLayout of tabsStringhorizontal,verticalhorizontal
alignTitlesAlignment of Tab TitlesStringleft,middle,rightleft
activeColorActive tab underline colorStringblack , #eee (Any hex/rgb or rgba value)black
1.1.2

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.2

4 years ago

1.0.3

4 years ago

1.0.0

4 years ago