yiminghe
10 years ago
13 changed files with 313 additions and 112 deletions
@ -1,19 +0,0 @@ |
|||
# 迷你的改变 |
|||
|
|||
- order: 5 |
|||
|
|||
改变每页显示条目数 |
|||
|
|||
--- |
|||
|
|||
````jsx |
|||
var Pagination = antd.Pagination; |
|||
|
|||
function onChange(page) { |
|||
console.log(page); |
|||
} |
|||
|
|||
React.render( |
|||
<Pagination className="mini" showQuickJumper={true} showSizeChanger={true} onChange={onChange} total={500} />, |
|||
document.getElementById('components-pagination-demo-mini-more')); |
|||
```` |
|||
@ -0,0 +1,94 @@ |
|||
# 带 icon 的滑块 |
|||
|
|||
- order: 2 |
|||
|
|||
--- |
|||
|
|||
````jsx |
|||
var Slider = antd.Slider; |
|||
|
|||
var IconSlider = React.createClass({ |
|||
getInitialState() { |
|||
var max = this.props.max; |
|||
var min = this.props.min; |
|||
var mid = ((max - min) / 2).toFixed(5); |
|||
|
|||
var preIcon, nextIcon; |
|||
if (this.props.value >= mid) { |
|||
preIcon = this.props.icon[0]; |
|||
nextIcon = this.props.icon[1] + ' anticon-highlight'; |
|||
} else { |
|||
preIcon = this.props.icon[0] + ' anticon-highlight'; |
|||
nextIcon = this.props.icon[1]; |
|||
} |
|||
|
|||
return { |
|||
preIcon: preIcon, |
|||
nextIcon: nextIcon, |
|||
mid: mid, |
|||
sliderValue: this.props.value |
|||
}; |
|||
}, |
|||
|
|||
handleChange(v) { |
|||
var preIcon, nextIcon; |
|||
if (v >= this.state.mid) { |
|||
preIcon = this.props.icon[0]; |
|||
nextIcon = this.props.icon[1] + ' anticon-highlight'; |
|||
} else { |
|||
preIcon = this.props.icon[0] + ' anticon-highlight'; |
|||
nextIcon = this.props.icon[1]; |
|||
} |
|||
|
|||
this.setState( |
|||
{ |
|||
preIcon: preIcon, |
|||
nextIcon: nextIcon, |
|||
sliderValue: v |
|||
} |
|||
); |
|||
}, |
|||
|
|||
render() { |
|||
return ( |
|||
<div className="iconWrapper"> |
|||
<i className={this.state.preIcon}></i> |
|||
<i className={this.state.nextIcon}></i> |
|||
<Slider {...this.props} onChange={this.handleChange} value={this.state.sliderValue} /> |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
|
|||
React.render( |
|||
<IconSlider min={0} max={20} value={0} icon={['anticon anticon-lock', 'anticon anticon-unlock']} /> |
|||
, document.getElementById('components-slider-demo-icon-slider')); |
|||
```` |
|||
|
|||
<style> |
|||
.iconWrapper { |
|||
position: relative; |
|||
padding: 0 24px; |
|||
} |
|||
|
|||
.iconWrapper .anticon { |
|||
position: absolute; |
|||
top: -6px; |
|||
width: 16px; |
|||
height: 16px; |
|||
line-height: 1; |
|||
font-size: 16px; |
|||
color: #ccc; |
|||
} |
|||
|
|||
.iconWrapper .anticon:nth-child(1) { |
|||
left: 0; |
|||
} |
|||
.iconWrapper .anticon:nth-child(2){ |
|||
right: 0; |
|||
} |
|||
|
|||
.anticon.anticon-highlight { |
|||
color: #666; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,45 @@ |
|||
# 带输入框的滑块 |
|||
|
|||
- order: 1 |
|||
|
|||
|
|||
|
|||
--- |
|||
|
|||
````jsx |
|||
var Slider = antd.Slider; |
|||
var InputNumber = antd.InputNumber; |
|||
|
|||
var Test = React.createClass({ |
|||
getInitialState() { |
|||
return { |
|||
inputValue: 0 |
|||
}; |
|||
}, |
|||
onChange(v){ |
|||
this.setState({ |
|||
inputValue: v |
|||
}); |
|||
}, |
|||
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-6"> |
|||
<InputNumber min={1} max={20} 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> |
|||
Loading…
Reference in new issue