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

77 lines
1.5 KiB
Markdown
Raw Normal View History

2015-07-14 12:06:44 +08:00
# 带 icon 的滑块
- order: 2
2015-07-16 16:48:06 +08:00
滑块左右可以设置图标来表达业务含义。
2015-07-14 12:06:44 +08:00
---
````jsx
import { Slider, Icon } from 'antd';
2015-07-14 12:06:44 +08:00
const IconSlider = React.createClass({
2015-07-14 12:06:44 +08:00
getInitialState() {
const max = this.props.max;
const min = this.props.min;
const mid = ((max - min) / 2).toFixed(5);
2015-07-14 12:06:44 +08:00
return {
preIconClass: this.props.value >= mid ? '' : 'anticon-highlight',
nextIconClass: this.props.value >= mid ? 'anticon-highlight' : '',
2015-07-14 12:06:44 +08:00
mid: mid,
sliderValue: this.props.value
};
},
handleChange(v) {
this.setState({
preIconClass: v >= this.state.mid ? '' : 'anticon-highlight',
nextIconClass: v >= this.state.mid ? 'anticon-highlight' : '',
sliderValue: v
});
2015-07-14 12:06:44 +08:00
},
2015-07-16 16:48:06 +08:00
2015-07-14 12:06:44 +08:00
render() {
return (
<div className="iconWrapper">
<Icon className={this.state.preIconClass} type={this.props.icon[0]} />
<Icon className={this.state.nextIconClass} type={this.props.icon[1]} />
2015-07-14 12:06:44 +08:00
<Slider {...this.props} onChange={this.handleChange} value={this.state.sliderValue} />
</div>
);
}
});
2015-10-20 16:47:55 +08:00
ReactDOM.render(
<IconSlider min={0} max={20} value={0} icon={['lock', 'unlock']} />
, mountNode);
2015-07-14 12:06:44 +08:00
````
2015-11-14 14:09:08 +08:00
````css
2015-07-14 12:06:44 +08:00
.iconWrapper {
position: relative;
2015-11-14 14:09:08 +08:00
padding: 0px 30px;
2015-07-14 12:06:44 +08:00
}
.iconWrapper .anticon {
position: absolute;
2015-11-14 14:09:08 +08:00
top: -3px;
2015-07-14 12:06:44 +08:00
width: 16px;
height: 16px;
line-height: 1;
font-size: 16px;
color: #ccc;
}
.iconWrapper .anticon-lock {
2015-07-14 12:06:44 +08:00
left: 0;
}
.iconWrapper .anticon-unlock{
2015-07-14 12:06:44 +08:00
right: 0;
}
.anticon.anticon-highlight {
color: #666;
}
2015-11-14 14:09:08 +08:00
````