chore: update examples

This commit is contained in:
Benjy Cui
2015-11-16 16:33:45 +08:00
parent 610531be12
commit 5f91e9a648
3 changed files with 57 additions and 24 deletions
+1
View File
@@ -0,0 +1 @@
placeholder
+42
View File
@@ -0,0 +1,42 @@
'use strict';
require('rc-slider/assets/index.less');
var React = require('react');
var ReactDOM = require('react-dom');
var Slider = require('rc-slider');
var style = {width: 400, margin: 50};
var marks = ['A','B','C','D', 'E', 'F'];
var log = console.log.bind(console);
ReactDOM.render(
<div>
<div style={style}>
<p>Slider with marks, `included=true`</p>
<Slider marks={marks} defaultIndex={1} />
</div>
<div style={style}>
<p>Slider with marks and steps, `included=true`</p>
<Slider marks={marks} step={10} defaultIndex={1} />
</div>
<div style={style}>
<p>Slider with marks, `included=false`</p>
<Slider marks={marks} included={false} defaultIndex={1} />
</div>
<div style={style}>
<p>Slider with marks and steps, `included=false`</p>
<Slider marks={marks} step={10} included={false} defaultIndex={1} />
</div>
<div style={style}>
<p>Range with marks</p>
<Slider range marks={marks} onChange={log} defaultIndex={[1,2]} />
</div>
<div style={style}>
<p>Range with marks and steps</p>
<Slider range marks={marks} step={10} onChange={log} defaultIndex={[1,2]} />
</div>
</div>
, document.getElementById('__react-content'));
+14 -24
View File
@@ -5,54 +5,44 @@ require('rc-slider/assets/index.less');
var React = require('react');
var ReactDOM = require('react-dom');
var Slider = require('rc-slider');
var style = {width:400,margin:50};
var style = {width: 400, margin: 50};
var log = console.log.bind(console);
var marks = ["状态1","状态2","状态3","状态4"];
function percentFormatter(v) {
return v + " %";
return v + ' %';
}
ReactDOM.render(
<div>
<div style={style}>
<p>基础滑块</p>
<Slider onChange={log} tipTransitionName='rc-slider-tooltip-zoom-down' />
<p>Basic Slider</p>
<Slider tipTransitionName='rc-slider-tooltip-zoom-down' onChange={log} />
</div>
<div style={style}>
<p>基础滑块step=20</p>
<p>Basic Slider`step=20`</p>
<Slider step={20} />
</div>
<div style={style}>
<p>基础滑块step=20 带圆点</p>
<p>Basic Slider`step=20, dots`</p>
<Slider dots step={20} />
</div>
<div style={style}>
<p>双滑块</p>
<Slider range min={10} max={90} defaultValue={[0, 30]} onChange={log} />
<p>Basic Slider with `tipFormatter`</p>
<Slider tipFormatter={percentFormatter} tipTransitionName='rc-slider-tooltip-zoom-down' onChange={log} />
</div>
<div style={style}>
<p>双滑块step=20 </p>
<Slider range dots step={20} defaultValue={[0, 30]} onAfterChange={log} included={false} />
<p>Basic Range</p>
<Slider range defaultValue={[0, 20]} onChange={log} />
</div>
<div style={style}>
<p>分段式滑块包含关系</p>
<Slider marks={marks} defaultIndex={1} />
<p>Basic Range`step=20` </p>
<Slider range step={20} defaultValue={[20, 40]} onAfterChange={log} />
</div>
<div style={style}>
<p>分段式滑块 ()</p>
<Slider range marks={marks} onChange={log} defaultIndex={[1,2]} />
</div>
<div style={style}>
<p>分段式滑块并列关系</p>
<Slider marks={marks} included={false} defaultIndex={1} />
</div>
<div style={style}>
<p>基础滑块</p>
<Slider onChange={log} tipFormatter={percentFormatter} tipTransitionName='rc-slider-tooltip-zoom-down' />
<p>Basic Range`step=20, dots` </p>
<Slider range dots step={20} defaultValue={[20, 40]} onAfterChange={log} />
</div>
</div>
, document.getElementById('__react-content'));