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;
}

效果图