react-slide-tab
v1.1.0
Published
react slide tab
Downloads
44
Maintainers
Readme
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 [email protected]: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