mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
parent
2e5928450d
commit
96a9583bf8
47
components/slider/demo/reverse.md
Normal file
47
components/slider/demo/reverse.md
Normal file
@ -0,0 +1,47 @@
|
||||
---
|
||||
order: 8
|
||||
title:
|
||||
zh-CN: 反向
|
||||
en-US: Reverse
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
设置 `reverse` 可以将滑动条置反。
|
||||
|
||||
## en-US
|
||||
|
||||
Using `reverse` to render slider reversely.
|
||||
|
||||
```jsx
|
||||
import { Slider, Switch } from 'antd';
|
||||
|
||||
class Demo extends React.Component {
|
||||
state = {
|
||||
reverse: true,
|
||||
};
|
||||
|
||||
handleReverseChange = reverse => {
|
||||
this.setState({ reverse });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { reverse } = this.state;
|
||||
return (
|
||||
<div>
|
||||
<Slider defaultValue={30} reverse={reverse} />
|
||||
<Slider range defaultValue={[20, 50]} reverse={reverse} />
|
||||
Reversed: <Switch size="small" checked={reverse} onChange={this.handleReverseChange} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<Demo />, mountNode);
|
||||
```
|
||||
|
||||
<style>
|
||||
.code-box-demo .ant-slider {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
@ -23,6 +23,7 @@ To input a value in a range.
|
||||
| max | The maximum value the slider can slide to | number | 100 | |
|
||||
| min | The minimum value the slider can slide to. | number | 0 | |
|
||||
| range | dual thumb mode | boolean | false | |
|
||||
| reverse | reverse the component | boolean | false | 3.24.0 |
|
||||
| step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be `null`. | number\|null | 1 | |
|
||||
| tipFormatter | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | Function\|null | IDENTITY | |
|
||||
| value | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] | |
|
||||
|
@ -24,6 +24,7 @@ title: Slider
|
||||
| max | 最大值 | number | 100 | |
|
||||
| min | 最小值 | number | 0 | |
|
||||
| range | 双滑块模式 | boolean | false | |
|
||||
| reverse | 反向坐标轴 | boolean | false | 3.24.0 |
|
||||
| step | 步长,取值必须大于 0,并且可被 (max - min) 整除。当 `marks` 不为空对象时,可以设置 `step` 为 `null`,此时 Slider 的可选值仅有 marks 标出来的部分。 | number\|null | 1 | |
|
||||
| tipFormatter | Slider 会把当前值传给 `tipFormatter`,并在 Tooltip 中显示 `tipFormatter` 的返回值,若为 null,则隐藏 Tooltip。 | Function\|null | IDENTITY | |
|
||||
| value | 设置当前取值。当 `range` 为 `false` 时,使用 `number`,否则用 `[number, number]` | number\|number\[] | | |
|
||||
|
@ -76,7 +76,7 @@
|
||||
"rc-progress": "~2.5.0",
|
||||
"rc-rate": "~2.5.0",
|
||||
"rc-select": "~9.2.0",
|
||||
"rc-slider": "~8.6.11",
|
||||
"rc-slider": "~8.7.1",
|
||||
"rc-steps": "~3.5.0",
|
||||
"rc-switch": "~1.9.0",
|
||||
"rc-table": "~6.8.2",
|
||||
|
Loading…
Reference in New Issue
Block a user