Add WIP TabsOption Component.
This commit is contained in:
parent
2cf54a8221
commit
5652c56995
|
@ -0,0 +1,65 @@
|
|||
import React, {Component} from "react";
|
||||
|
||||
const tabs = [
|
||||
{"name": "Generate Wallet"},
|
||||
{"name": "Send Ether & Tokens"},
|
||||
{"name": "Swap"},
|
||||
{"name": "Send Offline"},
|
||||
{"name": "Contracts"},
|
||||
{"name": "View Wallet"},
|
||||
{"name": "Help"}
|
||||
|
||||
]
|
||||
|
||||
export default class TabsOptions extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
showLeftArrow: false,
|
||||
showRightArrow: false
|
||||
}
|
||||
}
|
||||
|
||||
tabClick() {
|
||||
}
|
||||
|
||||
scrollLeft() {
|
||||
}
|
||||
|
||||
scrollRight() {
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<nav role="navigation" aria-label="main navigation" className="container nav-container overflowing">
|
||||
{this.state.showLeftArrow && <a aria-hidden="true" className="nav-arrow-left"
|
||||
onClick={() => this.scrollLeft(100)}>«</a> }
|
||||
<div className="nav-scroll">
|
||||
<ul className="nav-inner">
|
||||
{tabs.map((object, i) => {
|
||||
return (
|
||||
<li className="nav-item"
|
||||
key={i}
|
||||
onClick={this.tabClick(i)}>
|
||||
<a tabIndex="0" aria-label="nav item: {{tab.name | translate}}">
|
||||
{object.name}
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
{this.state.showRightArrow &&
|
||||
<a aria-hidden="true" className="nav-arrow-right"
|
||||
onClick={() => this.scrollRight(100)}
|
||||
ng-mouseover="scrollHoverIn(false,2);" ng-mouseleave="scrollHoverOut()">»</a
|
||||
>}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue