react-slide-tab

React-Slide-Tab

Overview

A react component based on the tabs;

Screenshot

Example

import React, {Component} from 'react';
import One from './TabsPage/One';
import Two from './TabsPage/Two';
import Three from './TabsPage/Three';
import TabController from './TabController';
export default class TabComponent extends Component {
    render() {
        const setting = {
            tabsTitleStyle: {height: '44px', background: '#f5f5f5'},
            itemStyle: {padding: '0 10px', height: 'inherit', lineHeight: '44px'},
            itemActiveStyle: {color: '#e9203d', boxShadow: 'inset 0px -2px 0px #e9203d'},
        };
        return (
            <div className="content">

                <TabController {...setting}>
                    {/*<div name="first">
                     One
                     </div>
                     <div name="second">
                     Two
                     </div>
                     <div name="third">
                     Three
                     </div>*/}
                    {
                        this.props.tabs.map((item, i) => (<div key={i} name={item.text}>{item.component}</div>))
                    }
                </TabController>


            </div>

        )
    }
}

TabComponent.defaultProps = {
    tabs: [
        {
            text: 'One',
            component: <One/>
        },
        {
            text: 'Two',
            component: <Two/>
        },
        {
            text: 'Three',
            component: <Three/>
        }
    ]
}

Usage

1、Clone the repo as a new project:

git clone git@github.com:chenjun1127/react-slide-tab.git
cd react-slide-tab

2、Installation dependency

cd react-slide-tab
npm install or yarn install

3、Run App

npm run dev command automatically initiate browser at 3000 port
npm run dev
http:://localhost:3000

4、Run Build

cd react-slide-tab
npm run build