1
0
mirror of https://github.com/bobwen-dev/react-templates synced 2025-04-12 00:56:39 +02:00

add direction to code sample

This commit is contained in:
ido 2014-11-30 13:12:03 +02:00
parent 229f046167
commit 3a1a1840df
5 changed files with 15107 additions and 15073 deletions

File diff suppressed because one or more lines are too long

View File

@ -118,4 +118,5 @@ var Playground = React.createClass({
}
});
React.render(Playground(), document.getElementById('playground'));
var elem = React.createElement(Playground, {direction: 'horizontal'}); //vertical
React.render(elem, document.getElementById('playground'));

View File

@ -18,13 +18,13 @@ body {
.code-area {
width: 50%;
height: 620px;
/*height: 620px;*/
float: left;
}
.result-area {
width: 50%;
height: 620px;
/*height: 620px;*/
float: left;
}

View File

@ -1,6 +1,6 @@
<!DOCTYPE rt CodeEditor="./aceEditor">
<div>
<div id="myTab" role="tabpanel" class="code-area">
<div id="myTab" role="tabpanel" class="code-area" style="float: {this.props.direction === 'horizontal' ? 'left' : 'none'}">
<!-- Nav tabs -->
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#template" aria-controls="template" role="tab" data-toggle="tab">Template</a></li>
@ -32,8 +32,7 @@
</div>
</div>
</div>
<div key="result-area" class="result-area well">
<br/>
<div key="result-area" class="result-area well" style="float: {this.props.direction === 'horizontal' ? 'left' : 'none'}; margin-top: 48px;">
<h2>Preview:</h2>
<form class="sample-view" onSubmit="(e) => e.preventDefault();">
<this.sample key="sample">

View File

@ -15,7 +15,8 @@ module.exports = function () {
return React.DOM.div({}, React.DOM.div({
'id': 'myTab',
'role': 'tabpanel',
'className': 'code-area'
'className': 'code-area',
'style': { float: this.props.direction === 'horizontal' ? 'left' : 'none' }
} /* Nav tabs */, React.DOM.ul({
'className': 'nav nav-pills',
'role': 'tablist'
@ -69,8 +70,12 @@ module.exports = function () {
'readOnly': true
})))), React.DOM.div({
'key': 'result-area',
'className': 'result-area well'
}, React.DOM.br({}), React.DOM.h2({}, 'Preview:'), React.DOM.form({
'className': 'result-area well',
'style': {
float: this.props.direction === 'horizontal' ? 'left' : 'none',
marginTop: '48px'
}
}, React.DOM.h2({}, 'Preview:'), React.DOM.form({
'className': 'sample-view',
'onSubmit': onSubmit3.bind(this)
}, this.sample({ 'key': 'sample' }))));