react-templates/playground/playground.rt

46 lines
2.2 KiB
Plaintext
Raw Normal View History

2014-12-28 10:47:34 +01:00
<!--<rt-require dependency="./aceEditor" as="CodeEditor"/>-->
<!--suppress CheckEmptyScriptTag -->
<rt-require dependency="./CodeMirrorEditor" as="CodeEditor"/>
<div class="playground">
2014-12-30 09:42:31 +01:00
<div id="{this.props.id}-myTab" class="code-area {this.getLayoutClass()}">
2014-11-27 17:53:37 +01:00
<!-- Nav tabs -->
2014-12-28 10:47:34 +01:00
<ul class="nav nav-tabs" role="tablist">
<li rt-repeat="tab in this.getTabs()" role="presentation"
rt-class="{active:this.state.currentTab === tab[0]}"
onClick="(evt)=> evt.preventDefault();this.setState({'currentTab':tab[0]});">
2014-12-30 09:42:31 +01:00
<a aria-controls="{tab[1]}">{tab[1]}</a>
</li>
2014-11-27 17:53:37 +01:00
</ul>
<!-- Tab panes -->
<div>
<div rt-if="this.state.currentTab === 'templateHTML'" class="tab-pane active" >
2014-12-28 10:47:34 +01:00
<CodeEditor ref="editorRT" class="large-text-area" style="border: {this.validHTML? '':'2px solid red'};"
2014-11-27 17:53:37 +01:00
value="{this.state.templateHTML}"
mode="html"
2014-12-30 09:42:31 +01:00
onChange="(evt) => this.setState({templateHTML:evt.target.value})" />
2014-11-27 17:53:37 +01:00
</div>
<div rt-if="this.state.currentTab === 'templateProps'" class="tab-pane active">
2014-12-28 10:47:34 +01:00
<CodeEditor ref="editorCode" class="large-text-area" style="border: {this.validProps? '':'2px solid red'};"
2014-11-27 17:53:37 +01:00
value="{this.state.templateProps}"
mode="javascript"
2014-12-30 09:42:31 +01:00
onChange="(evt) => this.setState({templateProps:evt.target.value})" />
2014-11-27 17:53:37 +01:00
</div>
<div rt-if="this.state.currentTab === 'templateSource'" class="tab-pane active">
2014-12-28 10:47:34 +01:00
<CodeEditor class="large-text-area"
2014-11-27 17:53:37 +01:00
value="{this.templateSource}"
mode="javascript"
2014-12-28 10:47:34 +01:00
readOnly="{true}" />
2014-11-27 17:53:37 +01:00
</div>
</div>
2014-11-17 12:27:57 +01:00
</div>
2014-12-28 10:47:34 +01:00
2014-12-30 09:42:31 +01:00
<div key="result-area" class="result-area {this.getLayoutClass()}">
2014-12-28 10:47:34 +01:00
<span class="preview-title">{'\u00A0'}</span>
2014-12-30 09:42:31 +01:00
<form ref="mount" class="sample-view" onSubmit="(e) => e.preventDefault();">
<!--<this.sample key="sample">-->
<!--</this.sample>-->
2014-11-27 17:53:37 +01:00
</form>
2014-11-17 12:27:57 +01:00
</div>
2014-12-02 17:59:03 +01:00
<br style="clear:both">
2014-11-16 16:20:04 +01:00
</div>