Skip to content

Instantly share code, notes, and snippets.

@diaraujo13

diaraujo13/BjjOZO.markdown

Last active December 16, 2015 13:59
Show Gist options
  • Save diaraujo13/a3f28ad8205f17fc61ab to your computer and use it in GitHub Desktop.
Save diaraujo13/a3f28ad8205f17fc61ab to your computer and use it in GitHub Desktop.
Download ZIP
BjjOZO
Raw
index.html
<html>
<head>
</head>
<body>
<div id='containera'> </div>
</body>
</html
Raw
script.js
class Screen extends React.Component {
/*
Toda <Screen> possui:
-> NavBar indicando a posição
-> Button-Bar indicando as opções
-> Uma tela de opções em seu interior <Screen></Screen>
*/
getInitialState(){
return {btn_back : "Voltar"}
}
render(){
var style_bottom_bar = {
position: 'relative',
bottom: '-80%'
}
return(
<div>
<div>
<Navbar conteudo='Home' />
</div>
<div className='ion-content'>
{this.props.children}
</div>
<div className='button-bar' style={this.style_bottom_bar}>
<a className='button button-stable' href='#'> Voltar </a>
<a className='button button-balanced' href='#'> Próximo </a>
</div>
</div>
);
}
}
class Navbar extends React.Component {
render(){
return (
<div className="bar bar-header bar-assertive" style={this.style_screen_bar}>
<h1 className="title"> { this.props.conteudo }</h1>
</div>
);
}
}
class EnderecoScreen extends React.Component{
render(){
return(
<div className="list">
<label className="item item-input item-stacked-label">
<span className="input-label">First Name</span>
<input type="text" placeholder="John"/>
</label>
<label className="item item-input item-stacked-label">
<span className="input-label">Last Name</span>
<input type="text" placeholder="Suhr"/>
</label>
<label className="item item-input item-stacked-label">
<span className="input-label">Email</span>
<input type="text" placeholder="john@suhr.com"/>
</label>
</div>
);
}
}
ReactDOM.render(
<Screen>
<EnderecoScreen/>
</Screen>
, document.getElementById('containera'));
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
Raw
style.css
.bar {
position: static
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.0/css/ionic.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment