ant-design/components/slider/demo/mark.md

33 lines
854 B
Markdown
Raw Normal View History

2015-07-13 08:00:31 +08:00
# 分段式滑块
- order: 3
2015-11-19 14:21:58 +08:00
使用 `marks` 属性标注分段式滑块,使用 `value` / `defaultValue` 指定滑块位置。当 `included=false` 时,表明不同标记间为并列关系。当 `step=null`Slider 的可选值仅有 `marks` 标出来的部分。
2015-07-13 08:00:31 +08:00
---
````jsx
import { Slider } from 'antd';
2015-07-13 08:00:31 +08:00
2015-11-18 16:56:22 +08:00
const marks = {
0: '0°C',
26: '26°C',
37: '37°C',
100: '100°C'
};
2015-10-20 16:47:55 +08:00
ReactDOM.render(
2015-11-18 16:56:22 +08:00
<div>
2015-07-14 12:06:44 +08:00
<p>包含关系</p>
2015-11-18 16:56:22 +08:00
<Slider marks={marks} defaultValue={37} />
<Slider range marks={marks} defaultValue={[26, 37]} />
2015-07-14 12:06:44 +08:00
<p>并列关系</p>
2015-11-18 16:56:22 +08:00
<Slider marks={marks} included={false} defaultValue={37} />
2015-11-18 17:50:22 +08:00
<p>结合 step</p>
2015-11-18 16:56:22 +08:00
<Slider marks={marks} step={10} defaultValue={37} />
2015-11-19 14:21:58 +08:00
<p>`step=null`</p>
<Slider marks={marks} step={null} defaultValue={37} />
2015-07-14 12:06:44 +08:00
</div>
2015-07-13 08:00:31 +08:00
, document.getElementById('components-slider-demo-mark'));
````