vue+element-ui修改el-steps默认样式
ElementUIsteps默认样式:实线修改为虚线圆点只需修改el-step__line:/deep/.el-step__line{background: transparent;border-top: 5px dotted;.el-step__line-inner{border-width: 0 !important;}}拓展:实现代码:其中绿色的Badge 标记可由step中的descrip
·
ElementUI steps
默认样式:
实线修改为虚线圆点
只需修改el-step__line
:
/deep/.el-step__line{
background: transparent;
border-top: 5px dotted;
.el-step__line-inner{
border-width: 0 !important;
}
}
拓展:
实现代码:其中绿色的Badge 标记
可由step中的description
来实现,通过修改.el-step__description
类来修改样式
代码中的icon是我项目中用到的,复制代码的话要把icon的class类名替换成自己的。
<div class="stepOne">
<el-steps :active="2" align-center>
<el-step title="Submitted" icon="iconfont icon-submitted" description="1"></el-step>
<el-step title="In Review" icon="iconfont icon-InReview" description="2"></el-step>
<el-step title="Verified" icon="iconfont icon-verified" description="3"></el-step>
<el-step title="Verified" icon="iconfont icon-Denied" description="4"></el-step>
</el-steps>
</div>
.stepOne{
padding-top: 30px;
background: #f6f6f6;
/deep/.el-step__icon{
background: #f6f6f6;
}
/deep/.el-step__icon-inner{
font-size: 36px;
}
/deep/.el-step__line{
background: transparent;
border-top: 5px dotted;
.el-step__line-inner{
border-width: 0 !important;
}
}
/deep/.el-step{
position: relative;
.el-step__head.is-process {
color: #C0C4CC;
border-color: #C0C4CC;
}
.el-step__title.is-process{
color: #C0C4CC;
font-weight: unset;
}
.el-step__description{
position: absolute;
top: -16px;
left: 49%;
width: 20px;
height: 16px;
line-height: 16px;
padding: 0;
text-align: center;
border-radius: 8px;
background: #999;
color: #fff;
}
.el-step__description.is-finish{
background: #36BE1BFF;
}
}
}
更多推荐
已为社区贡献25条内容
所有评论(0)