2016-03-31 09:40:55 +08:00
|
|
|
|
---
|
2016-11-25 15:34:25 +08:00
|
|
|
|
order: 5
|
2016-11-21 16:37:04 +08:00
|
|
|
|
title:
|
|
|
|
|
zh-CN: 带标签的滑块
|
2016-07-21 09:51:04 +08:00
|
|
|
|
en-US: Graduated slider
|
2016-03-31 09:40:55 +08:00
|
|
|
|
---
|
2015-07-13 08:00:31 +08:00
|
|
|
|
|
2016-07-21 09:51:04 +08:00
|
|
|
|
## zh-CN
|
|
|
|
|
|
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
|
|
|
|
|
2016-07-21 09:51:04 +08:00
|
|
|
|
## en-US
|
|
|
|
|
|
|
|
|
|
Using `marks` property to mark a graduated slider, use `value` or `defaultValue` to specify the position of thumb.
|
|
|
|
|
When `included` is false, means that different thumbs are coordinative.
|
|
|
|
|
when `step` is null, users can only slide the thumbs onto marks.
|
|
|
|
|
|
|
|
|
|
|
2017-01-19 15:19:03 +08:00
|
|
|
|
````__react
|
2015-10-28 20:55:49 +08:00
|
|
|
|
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',
|
2016-03-22 17:50:21 +08:00
|
|
|
|
100: {
|
|
|
|
|
style: {
|
2016-11-29 13:17:08 +08:00
|
|
|
|
color: '#f50',
|
2016-03-22 17:50:21 +08:00
|
|
|
|
},
|
|
|
|
|
label: <strong>100°C</strong>,
|
|
|
|
|
},
|
2015-11-18 16:56:22 +08:00
|
|
|
|
};
|
|
|
|
|
|
2015-10-20 16:47:55 +08:00
|
|
|
|
ReactDOM.render(
|
2016-04-29 12:13:27 +08:00
|
|
|
|
<div>
|
2016-11-29 13:17:08 +08:00
|
|
|
|
<h4>included=true</h4>
|
2016-04-29 12:13:27 +08:00
|
|
|
|
<Slider marks={marks} defaultValue={37} />
|
|
|
|
|
<Slider range marks={marks} defaultValue={[26, 37]} />
|
2016-11-29 13:17:08 +08:00
|
|
|
|
|
|
|
|
|
<h4>included=false</h4>
|
2016-04-29 12:13:27 +08:00
|
|
|
|
<Slider marks={marks} included={false} defaultValue={37} />
|
2016-11-29 13:17:08 +08:00
|
|
|
|
|
|
|
|
|
<h4>marks & step</h4>
|
2016-04-29 12:13:27 +08:00
|
|
|
|
<Slider marks={marks} step={10} defaultValue={37} />
|
2016-11-29 13:17:08 +08:00
|
|
|
|
|
|
|
|
|
<h4>step=null</h4>
|
2016-04-29 12:13:27 +08:00
|
|
|
|
<Slider marks={marks} step={null} defaultValue={37} />
|
2016-11-29 13:17:08 +08:00
|
|
|
|
</div>
|
|
|
|
|
, mountNode);
|
2015-07-13 08:00:31 +08:00
|
|
|
|
````
|
2016-11-29 13:17:08 +08:00
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
#components-slider-demo-mark h4 {
|
|
|
|
|
margin: 0 0 16px;
|
|
|
|
|
}
|
|
|
|
|
#components-slider-demo-mark .ant-slider-with-marks {
|
|
|
|
|
margin-bottom: 44px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|