物流步驟UI元件(react)
阿新 • • 發佈:2018-12-05
突然間,發現自己寫個好多元件,等閒下來,到時候,自己寫個UI元件庫,哈哈哈。
這個元件還能進行優化,思路是有但是欄主感覺不好上手。
廢話不說啦
看程式碼吧
stepsFew.jsx
import React,{ Component } from 'react' import './index.less' export default class StepsFew extends Component { render() { const { step } = this.props; return ( <div className='stepsWrap'> <div className='stepFew'> { ( () => { switch (step) { case '1': return( <div className='step'> <span className='circle active'></span><span className='line'></span> <span className='circle'></span><span className='line'></span> <span className='circle'></span><span className='line'></span> <span className='circle'></span> </div> ) case '2': return( <div className='step'> <span className='circle active'></span><span className='line active'></span> <span className='circle active'></span><span className='line'></span> <span className='circle'></span><span className='line'></span> <span className='circle'></span> </div> ) case '3': return( <div className='step'> <span className='circle active'></span><span className='line active'></span> <span className='circle active'></span><span className='line active'></span> <span className='circle active'></span><span className='line'></span> <span className='circle'></span> </div> ) case '4': return( <div className='step'> <span className='circle active'></span><span className='line active'></span> <span className='circle active'></span><span className='line active'></span> <span className='circle active'></span><span className='line active'></span> <span className='circle active'></span> </div> ) default: break; } } )() } </div> <div className='stepDesc'> <span>1.提交申請</span> <span>2.待稽核</span> <span>3.提交物流單號</span> <span>4.申請完成</span> </div> </div> ) } }
index.less 不會配置less的同學,可以看我之前寫的配置less的文章。(這裡用sass也行)
.stepsWrap{ height: 0.7rem; .stepFew { margin: 0 0.70rem; .step { display: -moz-box; /* Firefox */ display: -ms-flexbox; /* IE10 */ display: -webkit-box; /* Safari */ display: -webkit-flex; /* Chrome, WebKit */ display: flex; align-items:center;/*垂直居中*/ justify-content: center;/*水平居中*/ span{ background-color: #DCDADA; } .circle{ display: inline-block; width:0.2rem; height:0.2rem; border-radius:50%; } .active { background:rgba(246,90,111,1); } .line{ -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; height: 0.02rem; width: 1.77rem; } } } .stepDesc{ margin: 0.1rem 0.3rem; span{ font-size:0.2rem; font-family:PingFang-SC-Regular; font-weight:400; color:#262626; line-height:0.33rem; } span:nth-child(2) { margin-left: 1.1rem; } span:nth-child(3) { margin-left: 0.9rem; } span:nth-child(4) { margin-left: 0.8rem; } } }
最後引用
import React,{ Component } from 'react' import Header from '../components/header/Header'; import StepsFew from '../components/stepsFew/stepsFew' export default class SendPhone extends Component { constructor(props) { super(props); this.state = { } } render() { return ( <div className='container'> <StepsFew step='4' /> 寄手機 </div> ) } }
THE END