具有活动步骤和行的多步骤表单 [英] Multistep form with active steps and lines
本文介绍了具有活动步骤和行的多步骤表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在处理多步骤表单.我不确定如何在球体下方创建线条，也不确定如何执行步骤/活动/已通过方面来更改关键线.我需要一些与此设计接近的东西.
这是我最新的jsfiddle
我当前的代码
html
< ul className ="form-steps">< li className = {page === 1吗?'active':''}>< span><图标类型="rocket"/></span>步骤1< li>< li className = {page === 2吗?'active':"}>< span><图标类型="rocket"/></span>步骤2< li>< li className = {page === 3吗?'active':''}>< span><图标类型="rocket"/></span>步骤3< li>< li className = {page === 4吗?'active':"}>< span><图标类型="rocket"/></span>步骤4</li></ul> css
.form-steps {溢出:隐藏文本对齐:居中；李{向左飘浮;右边距:10px；跨度{背景:红色；边界半径:100％；宽度:50像素；高度:50px；显示:块；font-size:25px;行高:50px；}}} 因此重构当前可能看起来像
.form-steps {溢出:隐藏文本对齐:居中；}.form-steps li {向左飘浮;右边距:10px；}.form-steps li span {背景:红色；边界半径:100％；宽度:50像素；高度:50px；显示:块；font-size:25px;行高:50px；} < ul class ="form-steps">< li class ="active">< span><图标类型="rocket"/></span>步骤1</li>< li class ="active">< span><图标类型="rocket"/></span>步骤2</li>< li>&span;<图标类型=火箭"/</span>步骤3< li>< li>&span;<图标类型=火箭"/</span>步骤4</li></ul> 我要处理的代码有点旧-相似但设计不同.
ul {list-style:none;}ul li {float:left;}ul li.active span {color:orange;}ul li.inactive span {color:gray;}ul li span {display:block; position:relative; text-align:center; padding:25px;}ul li span:first-child:after {content:``; position:absolute; width:10px; height:10px; border-radius:50％; bottom:-8px; left:calc(50％-5px); z-index:1;}ul li.active span:first-child:after {border:3px solid orange; background-color:white;}ul li.inactive span:first-child:after {border:3px solid grey; background-color:white;}ul li:第一个孩子的跨度:最后一个孩子的:after {content:``; border-top:1px solid grey; width:50％; position:absolute; left:50％; top:0;}ul li:last-child span:last-child:before {content:``; border-top:1px solid grey; width:50％; position:absolute; left:0; top:0;}ul li:not(:last-child)span:last-child:after {content:``; border-top:1px solid grey; width:50％; position:absolute; left:50％; top:0;}ul li:not(:first-child)span:last-child:before {content:``; border-top:1px solid grey; width:50％; position:absolute; left:0; top:0;} < ul>< li class ="active">< span>通话</span>< span>/span</li>< li class ="inactive">" span"提案</span< span>等待</span>/li"< li class ="inactive">< span> Hire</span>< span</span</li></ul> 解决方案
尝试以下代码段.
.wizard-progress {列表样式:无；list-style-image:无；填充:0;空白:nowrap;}.wizard-progress li {向左飘浮;文本对齐:居中；职位:相对}.wizard-progress .step-name {显示:表格单元格；高度:32px；垂直对齐:底部；文本对齐:居中；宽度:100％;}.wizard-progress .step-num {font-size:14px;font-weight:粗体;边框:3px深灰色；背景色:深灰色；边界半径:50％；宽度:24像素；显示:inline-block;边距顶部:10像素;颜色:#fff;}.wizard-progress .step-num:之后{内容: "";显示:块；背景:深灰色；高度:1px；宽度:130％;/* 130px;*/位置:绝对；底部:45px；}.wizard-progress li:最后一个类型.step-num:之后{显示:无；}.step-done .step-num :: after {背景颜色:#000;}.wizard-progress .step-done .step-num，.wizard-progress .step-active .step-num {边框颜色:#000;背景颜色:#000；}.wizard-progress .step-active .step-name {font-weight:粗体;}/* 5个步骤的向导*/.wizard-5-steps {宽度:750px；}.wizard-5-steps li {保证金率:6.9％;/* 6.6687％;50px */宽度:13％;}.wizard-5-steps .step-num:之后{左:62％;}/* 6个步骤的向导*/.wizard-6-steps {宽度:750px；}.wizard-6-steps li {向左飘浮;边际收益率:5.5％；/* 6.6687％;50px */宽度:11％;}.wizard-6-steps .step-num:之后{左:64％;} < div class ="container center-block">< ol class ="wizard-progress向导-5步clearfix center-block">< li class ="step-done">< span class ="step-num"> 1</span>< span class ="step-name">程序</span></li>< li class ="step-done">< span class ="step-num"> 2</span>< span class ="step-name">约会</span></li>< li class ="step-active">< span class ="step-num"> 3</span>< span class ="step-name"> time</span></li>< li>< span class ="step-num"> 4</span>< span class ="step-name"> contact</span></li>< li>< span class ="step-num"> 5</span>< span class ="step-name">评论</span></li></ol></div> 检查更新的提琴手
I am working on a multi-stepped form. I am unsure how to create the line underneath the orbs, but also how to do the steps/active/passed aspects to change the keyline. I need something close to this design.
here is my latest jsfiddle http://jsfiddle.net/39sg7f3n/20/
my current code
html
<ul className="form-steps">
<li className={page === 1 ? 'active' : ''}><span><Icon type="rocket" /></span>Step 1</li>
<li className={page === 2 ? 'active' : ''}><span><Icon type="rocket" /></span>Step 2</li>
<li className={page === 3 ? 'active' : ''}><span><Icon type="rocket" /></span>Step 3</li>
<li className={page === 4 ? 'active' : ''}><span><Icon type="rocket" /></span>Step 4</li>
</ul>
css
.form-steps{
overflow:hidden;
text-align: center;
li{
float:left;
margin-right: 10px;
span{
background: red;
border-radius: 100%;
width: 50px;
height: 50px;
display: block;
font-size: 25px;
line-height: 50px;
}
}
}
so refactoring this may currently look like
.form-steps{
overflow:hidden;
text-align: center;
}
.form-steps li{
float:left;
margin-right: 10px;
}
.form-steps li span{
background: red;
border-radius: 100%;
width: 50px;
height: 50px;
display: block;
font-size: 25px;
line-height: 50px;
}
<ul class="form-steps">
<li class="active"><span><Icon type="rocket" /></span>Step 1</li>
<li class="active"><span><Icon type="rocket" /></span>Step 2</li>
<li><span><Icon type="rocket" /></span>Step 3</li>
<li><span><Icon type="rocket" /></span>Step 4</li>
</ul>
I have an old bit of code to hand - similar but different design.
ul{list-style:none;}
ul li{float:left;}
ul li.active span{color:orange;}
ul li.inactive span{color:gray;}
ul li span{display: block;position: relative;text-align: center;padding: 25px;}
ul li span:first-child:after{content: '';position: absolute;width: 10px;height: 10px;border-radius: 50%;bottom: -8px;left: calc(50% - 5px);z-index:1;}
ul li.active span:first-child:after{border: 3px solid orange;background-color: white;}
ul li.inactive span:first-child:after{border: 3px solid gray;background-color: white;}
ul li:first-child span:last-child:after{content: '';border-top: 1px solid gray;width: 50%;position: absolute;left: 50%;top: 0;}
ul li:last-child span:last-child:before{content: '';border-top: 1px solid gray;width: 50%;position: absolute;left: 0;top: 0;}
ul li:not(:last-child) span:last-child:after{content: '';border-top: 1px solid gray;width: 50%;position: absolute;left: 50%;top: 0;}
ul li:not(:first-child) span:last-child:before{content: '';border-top: 1px solid gray;width: 50%;position: absolute;left: 0;top: 0;}
<ul>
<li class="active"><span>Call</span><span>Completed</span></li>
<li class="inactive"><span>Proposal</span><span>Waiting</span></li>
<li class="inactive"><span>Hire</span><span></span></li>
</ul>
解决方案
Try below snippet.
.wizard-progress {
list-style: none;
list-style-image: none;
padding: 0;
white-space: nowrap;
}
.wizard-progress li {
float: left;
text-align: center;
position: relative;
}
.wizard-progress .step-name {
display: table-cell;
height: 32px;
vertical-align: bottom;
text-align: center;
width: 100%;
}
.wizard-progress .step-num {
font-size: 14px;
font-weight: bold;
border: 3px solid darkgray;
background-color: darkgray;
border-radius: 50%;
width: 24px;
display: inline-block;
margin-top: 10px;
color: #fff;
}
.wizard-progress .step-num:after {
content: "";
display: block;
background: darkgray;
height: 1px;
width: 130%;
/* 130px; */
position: absolute;
bottom: 45px;
}
.wizard-progress li:last-of-type .step-num:after {
display: none;
}
.step-done .step-num::after{
background-color:#000;
}
.wizard-progress .step-done .step-num,
.wizard-progress .step-active .step-num {
border-color: #000;
background-color: #000;
}
.wizard-progress .step-active .step-name {
font-weight: bold;
}
/* wizard with 5 steps */
.wizard-5-steps {
width: 750px;
}
.wizard-5-steps li {
margin-right: 6.9%;
/* 6.6687%; 50px */
width: 13%;
}
.wizard-5-steps .step-num:after {
left: 62%;
}
/* wizard with 6 steps */
.wizard-6-steps {
width: 750px;
}
.wizard-6-steps li {
float: left;
margin-right: 5.5%;
/* 6.6687%; 50px */
width: 11%;
}
.wizard-6-steps .step-num:after {
left: 64%;
}
<div class="container center-block">
<ol class="wizard-progress wizard-5-steps clearfix center-block">
<li class="step-done">
<span class="step-num">1</span>
<span class="step-name">program</span>
</li>
<li class="step-done">
<span class="step-num">2</span>
<span class="step-name">appointment</span>
</li>
<li class="step-active">
<span class="step-num">3</span>
<span class="step-name">time</span>
</li>
<li>
<span class="step-num">4</span>
<span class="step-name">contact</span>
</li>
<li>
<span class="step-num">5</span>
<span class="step-name">review</span>
</li>
</ol>
</div>
Check the updated fiddler
这篇关于具有活动步骤和行的多步骤表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
