react-tiny-tabs

    0.1.2 • Public • Published

    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

    option type description
    index Number Initialize active tab index
    color String active tab text color
    bgColor String active tab background color
    contentWrap Boolean Restrains panel content to the width of the tabs nav
    bottomNav Boolean Uses the nav in the bottom
    fadeTime Number (ms) Adds fade transition when switching

    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

    Install

    npm i react-tiny-tabs

    DownloadsWeekly Downloads

    10

    Version

    0.1.2

    License

    MIT

    Last publish

    Collaborators

    • nashio