react-tiny-tabs v0.1.2

Easy to use React tab component

• 3 different looks/themes
• Define transition speed or use the navigation in the bottom
• Nest tab components inside other tabs components
• Customize the tab nav to use title and subtitle
• Constrain content to match the nav width
• Customize colors for text and background

Demo

See the live DEMO

Install

npm install react-tiny-tabs

Usage

Include the CSS

<link rel="stylesheet" href="node_modules/react-tiny-tabs/dist/index.css">

Import and define the components

  import {Tabs, Nav, Content} from 'react-tiny-tabs';
  ...
 
  <Tabs className="theme-default" settings={bgColor: royalBlue, color: white}>
    <Nav>
      <div>First Tab</div>
      <div>Second Tab</div>
      <div>Third Tab</div>
    </Nav>
    <Content>
      <div>
        <p>Ut enim ad minim veniam, quis nostrud exercitation</p>
      </div>
      <div>
        <p>Magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
      </div>
      <div>
        <p>Duis aute irure dolor in reprehenderit in voluptate</p>
      </div>
    </Content>
  </Tabs>

Options

Classes

\<Tabs className="theme-x">

Themes

• .theme-default
• .theme-box
• .theme-folder

Nav modifier

• .two-rows (add support for 2 lines in the tab navigation)

Carry-over html attributes

Custom markup properties will be rendered in the resulting markup (good for aria roles, etc)

  <Nav role="tablist" className="your-own-class">
    <div role="tab" >First Tab</div>
    <div role="tab">Second Tab</div>
    <div role="tab">Third Tab</div>
  </Nav>

Files

Code example

demo/index.js/

Source file

src/

Build files

dist/

License

MIT