44 lines
2.5 KiB
Plaintext
44 lines
2.5 KiB
Plaintext
<rt-require dependency="./aceEditor" as="CodeEditor"/>
|
|
<div class="playground">
|
|
<div id="{this.props.id}-myTab" role="tabpanel" class="code-area {(this.props.direction === 'horizontal' && 'horizontal') ||'vertical'}">
|
|
<!-- Nav tabs -->
|
|
<ul class="nav nav-pills" role="tablist">
|
|
<li role="presentation" class="active"><a href="#{this.props.id}-template" aria-controls="template" role="tab" data-toggle="tab">Template</a></li>
|
|
<li rt-if="this.props.codeVisible" role="presentation"><a href="#{this.props.id}-classCode" aria-controls="classCode" role="tab" data-toggle="tab">Class</a></li>
|
|
<li role="presentation"><a href="#{this.props.id}-generatedCode" aria-controls="generatedCode" role="tab" data-toggle="tab">Generated code</a></li>
|
|
</ul>
|
|
<!-- Tab panes -->
|
|
<div class="tab-content">
|
|
<div role="tabpanel" class="tab-pane active" id="{this.props.id}-template">
|
|
<CodeEditor class="large-text-area" style="border: {this.validHTML? '1px solid black':'2px solid red'};"
|
|
value="{this.state.templateHTML}"
|
|
mode="html"
|
|
onChange="(evt) => this.setState({'templateHTML':evt.target.value})"
|
|
/>
|
|
</div>
|
|
<div rt-if="this.props.codeVisible" role="tabpanel" class="tab-pane" id="{this.props.id}-classCode">
|
|
<CodeEditor class="large-text-area" style="border: {this.validProps? '1px solid black':'2px solid red'};"
|
|
value="{this.state.templateProps}"
|
|
mode="javascript"
|
|
onChange="(evt) => this.setState({'templateProps':evt.target.value})"
|
|
/>
|
|
</div>
|
|
<div role="tabpanel" class="tab-pane" id="{this.props.id}-generatedCode">
|
|
<CodeEditor class="large-text-area" style="border:1px solid black;"
|
|
value="{this.templateSource}"
|
|
mode="javascript"
|
|
readOnly="{true}"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div key="result-area" class="result-area well {(this.props.direction === 'horizontal' && 'horizontal') ||'vertical'}" style="margin-top: 48px;">
|
|
<h2>Preview:</h2>
|
|
<form class="sample-view" onSubmit="(e) => e.preventDefault();">
|
|
<this.sample key="sample">
|
|
</this.sample>
|
|
</form>
|
|
</div>
|
|
<br style="clear:both">
|
|
</div>
|