react 实现的step组件（步骤引导）

同事写的，觉得思路很好，拿过来记录下

js 部分

var progressComponent = React.createClass({
render: function () {
return(
<div className={this.props.done ? 'progress-item done' : 'progress-item'} style={{ width: this.props.width ? this.props.width + 'px' : ''}}>
<div className="progress-title">{this.props.title}</div>
<div className="progress-body">
<h3>{this.props.number}</h3>
<div className="progress-line"></div>
</div>
</div>
)
}
});
module.exports = progressComponent;

html部分
.progress-item {
display: inline-block;
width: 250px;
text-align: center;
}

.progress-item.done .progress-body h3,
.progress-item.done .progress-line {
background-color: #EE494D;
}

.progress-title {
font-size: 16px;
}

.progress-body {
position: relative;
margin-top: 10px;
width: 100%;
height: 40px;
}

.progress-body h3 {
position: absolute;
z-index: 2;
top: 0;
left: 50%;
margin-left: -20px;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 20px;
color: #fff;
border-radius: 50%;
background-color: #D6DAE6;
}

.progress-line {
position: absolute;
z-index: 0;
top: 50%;
left: 0;
margin-top: -1px;
width: 100%;
height: 2px;
background-color: #D6DAE6;
}
效果图