Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
154 lines (132 sloc) 3.33 KB
title subtitle fontPair colors ga links
Demobox Demos
Getting rather meta
Open Sans
light-green
UA-7002862-5
Home Demos Themes Github
index.html
themes.html

Check out the source for this page and the source for the home page for extended examples of using demobox page generator.

This page demonstrates some of the configuration for the DemoBox component.

First example

// @demobox height=150px
var first = 'javascript code'
	, second = `You can evaluate ${first} with es6 goodness.`;
// the last line must be an expression that results in a react
//  element.
<p>
	<span>{second} </span><br/>
	<strong>JSX is just fine</strong>
</p>

The source for this demo (<<)

Using demobox cli (||)

```javascript
// @demobox
var first = 'javascript code'
    , second = `You can evaluate ${first} with es6 goodness.`;
// the last line must be an expression that results in a react
//  element.
<p>
    <span>{second} </span>
    <strong>JSX is just fine</strong>
</p>
```

Using demobox.js drop-in script (||)

<textarea data-demobox>
var first = 'javascript code'
    , second = `You can evaluate ${first} with es6 goodness.`;
// the last line must be an expression that results in a react
//  element.
<p>
    <span>{second} </span>
    <strong>JSX is just fine</strong>
</p>
</textarea>

Slightly larger example

The rest of these examples will show demobox-in-demobox, to make things easier.

// @demobox
var initialValue=`\
var name = 'Sara'
var NameComponent = React.createClass({
    render: function () {
    return <span>
        Hello <strong>{this.props.name}</strong>
    </span>
    }
});
<NameComponent name={name}/>`;

<DemoBox
  initialValue={initialValue}
  position='top'/>

Other Positions

The "position" argument allows you to specify where the output should be displayed. Default is "right".

// @demobox width=300
<div>
    <DemoBox position='top'/>
    <hr/>
    <DemoBox position='left'/>
    <hr/>
    <DemoBox/>
    <hr/>
    <DemoBox position='bottom'/>
</div>

Without CodeMirror (just uses a text box)

// @demobox
<DemoBox position='top' codeMirror={false}/>

Advanced Usage: External Output Node

<textarea data-demobox data-style-width="500px" data-style-height="200px" data-target="#second-target"> // code here [render target] This demo box one has a render target that is external, in a different cell of this table </textarea>

Source HTML

<textarea data-demobox data-target="#id-of-target">
// code here
<span>
  <strong>[render target] </strong>
  This demo box one has a render target
  that is external, in a different
  cell of this table
</span>
</textarea>
You can’t perform that action at this time.