Element 之 Steps 步骤条组件 simple 修改
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
简洁风格的步骤条 设置 simple
可应用简洁风格,该条件下 align-center
/ description
/ direction
/ space
都将失效。
针对该情况,将简单的步骤条修改为简洁风格步骤条呈现
<el-steps
:active="orderActive"
v-if="progresses.length > 0"
class="el-steps-sn reset-steps">
<el-step
:title="item.title"
:description="item.date"
icon="el-icon-info"
v-for="(item,index) in progresses"
:key="index">
</el-step>
</el-steps>
.el-step.is-simple .el-step__title:hover {
cursor: pointer;
}
.el-step.is-simple .el-step__title {
font-size: 14px;
margin-top: 5px;
max-width: 100px !important;
margin-left: 20px;
}
.el-steps--simple {
background: transparent;
padding: 30px 30px 35px;
}
.el-step.is-simple {
display: block;
}
.el-step.is-simple .el-step__arrow {
margin-top: -18px;
}
.el-step.is-simple .el-step__icon,
.el-step__main .el-step__title {
width: 140px;
text-align: center;
}
.el-step__title.is-finish {
color: #5390e1;
font-weight: 700;
}
.el-step__head.is-finish {
color: #5390e1;
border-color: #5390e1;
}
.el-step__line-inner {
border-style: none;
}
.el-step__line {
left: 9px !important;
}
.el-step__title.is-process,
.is-process .el-step__icon-inner.el-icon-info {
color: #4255a2;
//font-weight:normal;
}
.el-step__title.is-finish,
.is-finish .el-step__icon-inner.el-icon-info {
color: #28bc79;
}
.el-step.is-simple:not(:last-of-type) .el-step__title {
max-width: none;
}
.el-step__title {
font-size: 12px;
text-align: center !important;
}
.el-step__icon {
width: 20px;
height: 20px;
}
.el-steps--simple.el-steps-sn {
padding: 0 !important;
}
.reset-steps {
.el-step__head{
width:140px;
}
.el-step__line {
background-color: transparent;
position: absolute;
top: 10px;
right:-14px !important;
left: auto !important;
.el-step__line-inner {
&:before, &:after {
content: '';
display: inline-block;
position: absolute;
height: 15px;
width: 1px;
background: #c0c4cc;
}
&:before {
-webkit-transform: rotate(-45deg) translateY(-4px);
transform: rotate(-45deg) translateY(-4px);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
&:after {
-webkit-transform: rotate(45deg) translateY(4px);
transform: rotate(45deg) translateY(4px);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
}
}
.el-step__main {
.el-step__description.is-process,
.el-step__description.is-finish,
.el-step__description.is-wait {
text-indent: 15px;
}
}
.el-step__icon{background-color:transparent}
}
效果如下图:
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)