mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 02:59:04 +08:00
update slider demo
This commit is contained in:
parent
403149f2a1
commit
e434361f07
@ -2,15 +2,14 @@
|
||||
|
||||
- order: 0
|
||||
|
||||
基本滑动条
|
||||
基本滑动条.
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
var Slider = antd.Slider;
|
||||
|
||||
React.render(
|
||||
<div className="sliderContainer">
|
||||
React.render(<div>
|
||||
<Slider />
|
||||
<Slider value={65} disabled />
|
||||
</div>
|
||||
@ -18,13 +17,8 @@ React.render(
|
||||
````
|
||||
|
||||
<style>
|
||||
/* .sliderContainer p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.sliderContainer .ant-slider {
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
.sliderContainer .ant-slider:last-child {
|
||||
margin-bottom: 0;
|
||||
}*/
|
||||
</style>
|
||||
.code-box-demo .ant-slider {
|
||||
margin-bottom: 50px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
</style>
|
||||
|
@ -2,6 +2,8 @@
|
||||
|
||||
- order: 2
|
||||
|
||||
滑块左右可以设置图标来表达业务含义。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
@ -40,7 +42,7 @@ var IconSlider = React.createClass({
|
||||
nextIcon = this.props.icon[1];
|
||||
}
|
||||
|
||||
this.setState(
|
||||
this.setState(
|
||||
{
|
||||
preIcon: preIcon,
|
||||
nextIcon: nextIcon,
|
||||
@ -48,7 +50,7 @@ var IconSlider = React.createClass({
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="iconWrapper">
|
||||
@ -91,4 +93,4 @@ React.render(
|
||||
.anticon.anticon-highlight {
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
@ -2,7 +2,7 @@
|
||||
|
||||
- order: 1
|
||||
|
||||
|
||||
和[数字输入框](/components/input-number/)组件保持同步。
|
||||
|
||||
---
|
||||
|
||||
@ -16,30 +16,25 @@ var Test = React.createClass({
|
||||
inputValue: 0
|
||||
};
|
||||
},
|
||||
onChange(v){
|
||||
onChange(value) {
|
||||
this.setState({
|
||||
inputValue: v
|
||||
inputValue: value
|
||||
});
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-12 spacing">
|
||||
<Slider min={1} max={20} onChange={this.onChange} value={this.state.inputValue}/>
|
||||
</div>
|
||||
<div className="col-4">
|
||||
<InputNumber min={1} max={20} value={this.state.inputValue} onChange={this.onChange} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<Slider min={1} max={20} onChange={this.onChange} value={this.state.inputValue} />
|
||||
</div>
|
||||
<div className="col-4">
|
||||
<InputNumber min={1} max={20} style={{marginLeft: '16px'}}
|
||||
value={this.state.inputValue} onChange={this.onChange} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
React.render(<Test />, document.getElementById('components-slider-demo-input-number-slider'));
|
||||
````
|
||||
|
||||
<style>
|
||||
.spacing {
|
||||
padding-right: 16px;
|
||||
}
|
||||
</style>
|
||||
|
@ -18,11 +18,3 @@ React.render(
|
||||
</div>
|
||||
, document.getElementById('components-slider-demo-mark'));
|
||||
````
|
||||
|
||||
<style>
|
||||
.sliderContainer .ant-slider {
|
||||
margin-bottom: 50px;
|
||||
margin-left: 15px;
|
||||
width: 75%;
|
||||
}
|
||||
</style>
|
@ -13,7 +13,7 @@
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 类型 | 默认值 |说明 |
|
||||
| 参数 | 类型 | 默认值 |说明 |
|
||||
|------------|----------------|-------------|--------------|
|
||||
| min | Number | 0 | 最小值
|
||||
| max | Number | 100 | 最大值
|
||||
@ -22,4 +22,4 @@
|
||||
| marks | Array | [] | 分段标记,标记每一个 step,如果 step 属性没有定义,则 `marks` 属性会被忽略
|
||||
| isIncluded | Boolean | true | 分段式滑块,值为 true 时表示值为包含关系,false 表示并列
|
||||
| index | Number | 0 | 为具备 `step` 或者 `marks` 的 slider 提供滑块操作按钮最初的位置
|
||||
| disabled | Boolean | false | 值为 `true` 时,滑块为 disable 禁用状态
|
||||
| disabled | Boolean | false | 值为 `true` 时,滑块为 disable 禁用状态
|
||||
|
Loading…
Reference in New Issue
Block a user