记录--纯CSS实现一个简单又不失优雅的步骤条

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

步骤条是一种用于引导用户按照特定流程完成任务的导航条,在各种分步表单交互场景中广泛应用。先来看一下几个主流前端 UI 框架中步骤条组件的样子:

我们可以发现,步骤条通常由编号、名称和引导线三个基本要素组成。本文中要实现的是一个简单的步骤条,包含上述三个基本要素,下面是最终的效果图:

接下来将详细介绍实现过程。

确定结构

对于步骤条这种呈现顺序的列表结构,在 HTML 标签选择上,使用 ulol 标签可以让语义更加清晰,这里我们使用了 ol 标签,HTML 代码如下:

<ol class="steps">
  <li>注册</li>
  <li>域认证</li>
  <li>身份校验</li>
  <li>风险等级评估</li>
  <li>开通账号</li>
</ol>

由于步骤项需要水平排列,因此在 CSS 中用了 flex 布局,代码如下所示:

.steps {
  display: flex;
  justify-content: space-between;  /* 按水平均匀分布,行首行尾两端靠齐 */
  margin: 0;
}

现在,我们的“步骤条”已初步有那么点儿意思了,让我们继续完善细节。

生成步骤编号

步骤编号可利用 CSS 的原生能力来自动生成,在上一步中,ol 标签生成的编号并不好看,此处我们用 ::before 伪元素和 CSS 计数器来实现带圈编号的样式,让步骤看起来更加清晰明了。

感兴趣的小伙伴可移步《CSS实现有序列表编号方法知多少》一文查看相关知识点

.steps {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  counter-reset: order;  /* 定义CSS计数器 */
  list-style: none;
}
.steps > li {counter-increment: order;}
.steps > li::before {
  content: counter(order);  /* 编号 */
  display: inline-block;
  width: 1.4em;
  line-height: 1.4em;
  margin-right: .5em;
  vertical-align: middle;
  text-align: center;
  border-radius: 50%;
  border: 1px solid;
}

实现效果如下图所示:

实现引导线

我们已经有了步骤编号和名称,接下来需要实现步骤引导线。

引导线将各个步骤项连接为一体,使流程在视觉上具有指向性,它是个装饰性元素,所以不应该出现在 HTML中。由于前面的 ::before 已经用于步骤编号,所以我们选择使用 ::after 来实现引导线。

.steps > li::after {
  content: '';
  display: inline-block;
  width: 60px;
  vertical-align: middle;  /* 让引导线和文本垂直居中 */
  border-bottom: 1px solid #ccc;
}
效果如下图所示:

 最后一个步骤项是不需要引导线的,所以我们改用 :not 伪类选择器把它过滤掉:

.steps > li:not(:last-child)::after {
  ...
}
现在我们面临一个难题:怎样确定引导线的宽度呢?使用固定宽度显然行不通,因为这会有很大的局限性。理想的解决方案是引导线宽度能够自动适应,占据除编号和名称文本以外的剩余空间。这种宽度自适应的场景,我们会很自然想到用 flex 布局来解决:只需将每个步骤项 li 标签的布局属性改为 inline-flex 盒子即可。
.steps > li {
  flex: auto;  /* 弹性宽度(根据其内容来调整) */
  display: inline-flex;  /* 内联块级弹性伸缩盒子 */
  align-items: center;
  counter-increment: order;
}
​
.steps > li:not(:last-child)::after {
  content: '';
  flex: 1;  /* 占满 li 中的剩余宽度 */
  margin: 0 1em;
  border-bottom: 1px solid #ccc;
}

现在的布局效果已经非常接近目标了:

 如果我们看得仔细一些,就会发现在最后一个步骤项的右边出现了一段空白,实际中我们希望它能够和右边对齐。

这个空白的产生和步骤项 li 标签的 flex: auto 这个 CSS 属性有关,该属性会根据当前容器的可用宽度来分配父容器宽度,当分配后还有剩余宽度时,前几个步骤项会有 CSS 属性为 flex: 1 的引导线来填补剩余宽度,但最后一个步骤项没有引导线,因此会出现空白。在了解根因后,我们只需要调整最后一个步骤项即可解决这个问题:
.steps > li:last-child {
  flex: none;
}

同时我们也意识到,当步骤项容器宽度不够时,作为 flex 子元素的圆形编号可能会被挤压变形:

 解决方案也很简单,禁止 flex 子元素收缩:

.steps > li::before {
  ...
  flex-shrink: 0;  /* 布局宽度不够时禁止收缩 */
}

步骤条状态

在调教好布局结构之后,我们来为步骤条增加状态。通常情况下,步骤条状态包括“已完成”、“进行中”和“未开始”三种,对应的装饰样式如下表所示:

状态步骤编号步骤名称步骤引导线
已完成 无背景色,边框和文本高亮色 文本高亮色 高亮色
进行中 背景和边框高亮色,文本反色 文本高亮色 普通色
未开始 无背景色,边框和文本普通色 文本普通色 普通色

对此我们定义普通色和高亮色这2个颜色变量,以方便代码维护和扩展。

.steps {
  --normal-color: #666;  /* 普通色 */
  --active-color: #06e;  /* 高亮色 */
​
  ...
}

然后将所有步骤项默认以普通色呈现:

.steps > li {
  ...
  color: var(--normal-color);
}

引导线的颜色则默认自动继承字体颜色,同时为了避免引导线喧宾夺主,我们给它加了个透明度控制下颜色深度:

.steps > li:not(:last-child)::after {
  ...
  border-bottom: 1px solid;  /* 不指定颜色,则自动继承自身color或父级color */
  opacity: .6;
}

接下来是“已完成”和“进行中”的样式定义,需要注意“进行中”后面的引导线不能高亮。

.steps > .done,
.steps > .active {
  color: var(--active-color);
}
.steps > .active::before {
  color: #fff;
  background: var(--active-color);
  border-color: var(--active-color);
}
.steps > .active::after {
  color: var(--normal-color);  /* “进行中”后面的引导线按普通色显示 */
}

然后在 HTML 中调用对应的样式钩子:

<ol class="steps">
  <li class="done">注册</li>
  <li class="done">域认证</li>
  <li class="done">身份校验</li>
  <li class="active">风险等级评估</li>
  <li>开通账号</li>
</ol>

实现效果如下图所示:

最终方案

就显示效果而言,现在可以收工了,但对于将优雅奉为圭臬的程序猿来说,这个步骤条还差点意思——用 done 和 active 样式钩子来分别标记“已完成”和“进行中”的状态——这并不优雅。

<ol class="steps">
  <li class="done">注册</li>  <!-- 已完成 -->
  <li class="done">域认证</li>  <!-- 已完成 -->
  <li class="done">身份校验</li>  <!-- 已完成 -->
  <li class="active">风险等级评估</li>  <!-- 进行中 -->
  <li>开通账号</li>
</ol>
如果回想一下我们在前端 UI 框架中使用的步骤条,就会发现它只要关心当前进展到了哪一步,而“已完成”和“未完成”都是被组件内部自行处理的。那么,对于我们现在所做的步骤条,是否可以仅标记“进行中”,也就是只使用 active 样式钩子就可以了呢?就像下面这样:
<ol class="steps">
  <li>注册</li>
  <li>域认证</li>
  <li>身份校验</li>
  <li class="active">风险等级评估</li>  <!-- 进行中 -->
  <li>开通账号</li>
</ol>

对于这样的 HTML 结构,active 这个钩子可继续沿用之前的 CSS 代码,实现当前步骤项的高亮效果,然后可以根据 active 这个类名匹配它前面的兄弟步骤项,实现与 done 这个类一样的效果。不过我们很快就会被现实打脸:CSS 中根本没有“前兄弟选择器”这种东西,因此无法根据 active 向前匹配。

于是我们需要调整思路,逆向思考:既然无法匹配 active 前面的元素,那为什么不匹配其后面的元素呢?毕竟 CSS 中是有兄弟选择器的呀,至于 active 前面的元素,或许我们可以通过其父级来控制样式?

现在思路清晰了许多。我们先把所有步骤项都默认设置为“已完成”状态的高亮样式:

.steps > li {
  ...
  color: var(--active-color);  /* 改为“已完成”,之前的值是 var(--normal-color) */
}
此时步骤条变成了这样:

 然后加上 active 的样式,假设当前是第4步,则效果如下:

接下来就是将 active 后面的步骤项改成“未开始”的样式,利用兄弟选择器轻松搞定:
.steps > .active ~ li {
  color: var(--normal-color);
}

最后再来测试下整体效果:

最终完整的 CSS 代码如下:

 

.steps {
  --normal-color: #666;
  --active-color: #06e;
​
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  counter-reset: order;
}
​
/* 步骤项 */
.steps > li {
  flex: auto;
  display: inline-flex;
  align-items: center;
  counter-increment: order;
  color: var(--active-color);
}
.steps > li:last-child {flex: none;}
​
/* 步骤编号(带圈数字) */
.steps > li::before {
  content: counter(order);
  flex-shrink: 0;
  width: 1.4em;
  line-height: 1.4em;
  margin-right: .5em;
  text-align: center;
  border-radius: 50%;
  border: 1px solid;
}
​
/* 步骤项引导线 */
.steps > li:not(:last-child)::after {
  content: '';
  flex: 1;
  margin: 0 1em;
  border-bottom: 1px solid;
  opacity: .6;
}
​
/* 步骤状态 */
.steps > .active {color: var(--active-color);}
.steps > .active::before {
  color: #fff;
  background: var(--active-color);
  border-color: var(--active-color);
}
.steps > .active::after,
.steps > .active ~ li {color: var(--normal-color);}

本文附件中提供完整代码的 demo,感兴趣的小伙伴可联系我们获取,可在现有基础上定制、扩展。下面是抛砖引玉:

知识点总结

  • flex 容器的 justify-content: space-between; 可令子元素按显示方向均匀分布,两端分散对齐,实在是居家旅行之必备神器;
  • inline-flex 的盒子既能像 flex 容器那样轻松拿捏其子元素的布局,又能像行内块元素一样平易近人;
  • CSS 计数器洗剪吹一条龙:counter-resetcounter-incrementcounter(xxx)
  • flex: <number>对于宽度(或高度)能占尽占,该是我的就是我的,能剩一点算我输;
  • flex: auto 从自身实际情况出发应占尽占,大家共同富裕不香吗;
  • flex-shrink 用来设置 flex 元素的可压榨基准,与它对应的是 flex-basis,用来设置可膨胀基准;
  • IE 都亡了,CSS 变量,放心用起来吧;
  • 强大的 CSS 伪类选择器,可以让代码更精简,还可以打出组合拳:li:not(:last-child)::after
  • 平平无奇关键时刻又能打能抗的兄弟选择器:.active ~ li

本文转载于:

https://juejin.cn/post/7226910005144043580

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 

热门相关:流鱼无恙   重生之至尊千金   重生之至尊千金   无限杀路   横行霸道