242 lines
12 KiB
JavaScript
242 lines
12 KiB
JavaScript
import React, {Component} from 'react';
|
|
import {Badge, Row, Col, TabContent, TabPane, Nav, NavItem, NavLink} from 'reactstrap';
|
|
import classnames from 'classnames';
|
|
|
|
class Tabs extends Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.toggle = this.toggle.bind(this);
|
|
this.state = {
|
|
activeTab: '1'
|
|
};
|
|
}
|
|
|
|
toggle(tab) {
|
|
if (this.state.activeTab !== tab) {
|
|
this.setState({
|
|
activeTab: tab
|
|
});
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className="animated fadeIn">
|
|
<Row>
|
|
<Col xs="12" md="6" className="mb-4">
|
|
<Nav tabs>
|
|
<NavItem>
|
|
<NavLink
|
|
className={classnames({ active: this.state.activeTab === '1' })}
|
|
onClick={() => { this.toggle('1'); }}
|
|
>
|
|
Home
|
|
</NavLink>
|
|
</NavItem>
|
|
<NavItem>
|
|
<NavLink
|
|
className={classnames({ active: this.state.activeTab === '2' })}
|
|
onClick={() => { this.toggle('2'); }}
|
|
>
|
|
Profile
|
|
</NavLink>
|
|
</NavItem>
|
|
<NavItem>
|
|
<NavLink
|
|
className={classnames({ active: this.state.activeTab === '3' })}
|
|
onClick={() => { this.toggle('3'); }}
|
|
>
|
|
Messages
|
|
</NavLink>
|
|
</NavItem>
|
|
</Nav>
|
|
<TabContent activeTab={this.state.activeTab}>
|
|
<TabPane tabId="1">
|
|
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
|
officia deserunt mollit anim id est laborum.
|
|
</TabPane>
|
|
<TabPane tabId="2">
|
|
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
|
officia deserunt mollit anim id est laborum.
|
|
</TabPane>
|
|
<TabPane tabId="3">
|
|
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
|
officia deserunt mollit anim id est laborum.
|
|
</TabPane>
|
|
</TabContent>
|
|
</Col>
|
|
<Col xs="12" md="6" className="mb-4">
|
|
<Nav tabs>
|
|
<NavItem>
|
|
<NavLink
|
|
className={classnames({ active: this.state.activeTab === '1' })}
|
|
onClick={() => { this.toggle('1'); }}
|
|
>
|
|
<i className="icon-calculator"></i>
|
|
</NavLink>
|
|
</NavItem>
|
|
<NavItem>
|
|
<NavLink
|
|
className={classnames({ active: this.state.activeTab === '2' })}
|
|
onClick={() => { this.toggle('2'); }}
|
|
>
|
|
<i className="icon-basket-loaded"></i>
|
|
</NavLink>
|
|
</NavItem>
|
|
<NavItem>
|
|
<NavLink
|
|
className={classnames({ active: this.state.activeTab === '3' })}
|
|
onClick={() => { this.toggle('3'); }}
|
|
>
|
|
<i className="icon-pie-chart"></i>
|
|
</NavLink>
|
|
</NavItem>
|
|
</Nav>
|
|
<TabContent activeTab={this.state.activeTab}>
|
|
<TabPane tabId="1">
|
|
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
|
officia deserunt mollit anim id est laborum.
|
|
</TabPane>
|
|
<TabPane tabId="2">
|
|
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
|
officia deserunt mollit anim id est laborum.
|
|
</TabPane>
|
|
<TabPane tabId="3">
|
|
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
|
officia deserunt mollit anim id est laborum.
|
|
</TabPane>
|
|
</TabContent>
|
|
</Col>
|
|
<Col xs="12" md="6" className="mb-4">
|
|
<Nav tabs>
|
|
<NavItem>
|
|
<NavLink
|
|
className={classnames({ active: this.state.activeTab === '1' })}
|
|
onClick={() => { this.toggle('1'); }}
|
|
>
|
|
<i className="icon-calculator"></i> <span className={ this.state.activeTab === '1' ? "" : "d-none"}> Calculator</span>
|
|
</NavLink>
|
|
</NavItem>
|
|
<NavItem>
|
|
<NavLink
|
|
className={classnames({ active: this.state.activeTab === '2' })}
|
|
onClick={() => { this.toggle('2'); }}
|
|
>
|
|
<i className="icon-basket-loaded"></i> <span
|
|
className={ this.state.activeTab === '2' ? "" : "d-none"}> Shopping cart</span>
|
|
</NavLink>
|
|
</NavItem>
|
|
<NavItem>
|
|
<NavLink
|
|
className={classnames({ active: this.state.activeTab === '3' })}
|
|
onClick={() => { this.toggle('3'); }}
|
|
>
|
|
<i className="icon-pie-chart"></i> <span className={ this.state.activeTab === '3' ? "" : "d-none"}> Charts</span>
|
|
</NavLink>
|
|
</NavItem>
|
|
</Nav>
|
|
<TabContent activeTab={this.state.activeTab}>
|
|
<TabPane tabId="1">
|
|
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
|
officia deserunt mollit anim id est laborum.
|
|
</TabPane>
|
|
<TabPane tabId="2">
|
|
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
|
officia deserunt mollit anim id est laborum.
|
|
</TabPane>
|
|
<TabPane tabId="3">
|
|
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
|
officia deserunt mollit anim id est laborum.
|
|
</TabPane>
|
|
</TabContent>
|
|
</Col>
|
|
<Col xs="12" md="6" className="mb-4">
|
|
<Nav tabs>
|
|
<NavItem>
|
|
<NavLink
|
|
className={classnames({ active: this.state.activeTab === '1' })}
|
|
onClick={() => { this.toggle('1'); }}
|
|
>
|
|
<i className="icon-calculator"></i> <span className={ this.state.activeTab === '1' ? "" : "d-none"}> Calculator </span>{'\u00A0'}<Badge
|
|
color="success">New</Badge>
|
|
</NavLink>
|
|
</NavItem>
|
|
<NavItem>
|
|
<NavLink
|
|
className={classnames({ active: this.state.activeTab === '2' })}
|
|
onClick={() => { this.toggle('2'); }}
|
|
>
|
|
<i className="icon-basket-loaded"></i> <span
|
|
className={ this.state.activeTab === '2' ? "" : "d-none"}> Shopping cart </span>{'\u00A0'}<Badge pill color="danger">29</Badge>
|
|
</NavLink>
|
|
</NavItem>
|
|
<NavItem>
|
|
<NavLink
|
|
className={classnames({ active: this.state.activeTab === '3' })}
|
|
onClick={() => { this.toggle('3'); }}
|
|
>
|
|
<i className="icon-pie-chart"></i> <span className={ this.state.activeTab === '3' ? "" : "d-none"}> Charts</span>
|
|
</NavLink>
|
|
</NavItem>
|
|
</Nav>
|
|
<TabContent activeTab={this.state.activeTab}>
|
|
<TabPane tabId="1">
|
|
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
|
officia deserunt mollit anim id est laborum.
|
|
</TabPane>
|
|
<TabPane tabId="2">
|
|
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
|
officia deserunt mollit anim id est laborum.
|
|
</TabPane>
|
|
<TabPane tabId="3">
|
|
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
|
officia deserunt mollit anim id est laborum.
|
|
</TabPane>
|
|
</TabContent>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default Tabs;
|