简洁的步骤条设计｜8月更文挑战

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

作者：battleKing
仓库：Github、CodePen
博客：CSDN、掘金
反馈邮箱：myh19970701@foxmail.com
特别声明：原创不易，未经授权不得转载或抄袭，如需转载可联系笔者授权

背景

步骤条是一种常见的导航形式，在网页流程设计中随处可见步骤条的影子。一般用于 注册、登录、验证 界面或者 需要多方合作才能完成的事件，由于移动端屏幕小，要兼容内容和用户体验的话，使用步骤条是一个不错的解决方案，所以现在在移动端的 注册、登录、验证 界面得到广泛的使用，备受好评 。那么一个好看简洁的步骤条是如何设计的呢？接下来，笔者将会手把手教大家介绍了设计一个只使用原生 HTML 、CSS、Javascript 的步骤条。

步骤条特点

1. 步骤条一般分为：长条型和点线型
2. 步骤条的作用是 导航
3. 告知用户 我在哪 和 我能去哪
4. 适合比较长的流程，一般 3个以上的流程 才有使用的必要

最终效果

一、添加 HTML 文件

<div class="box">
    <div class="box_step_line">
        <div class="progress" id="progress"></div>
        <div class="circle active">1</div>
        <div class="circle">2</div>
        <div class="circle">3</div>
        <div class="circle">4</div>
    </div>

    <button class="btn" id="prev" disabled>Prev</button>
    <button class="btn" id="next">Next</button>
</div>

二、添加 CSS 文件

先初始化页面

1. 设置 * 为 box-sizing: border-box
2. 设置 body 来使整个项目居中

* {
  box-sizing: border-box;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

CSS 全局变量

1. CSS 全局变量声明在 :root 文档根元素中，语法为 --*
2. CSS 全局变量使用语法为 var(--*)

:root {
    --line-border-fill: #6A5ACD;
    --line-border-empty: #c0c0c0;
}

主要的 CSS 代码

1. 命名一个为类名为 .active，设置一个 紫色边框 的样式
2. 命名一个为类名为 .progress,设置为 紫色背景 和 width: 0%

.box {
    text-align: center;
}

.box_step_line {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 30px;
    max-width: 100%;
    width: 350px;
}

.box_step_line::before {
    content: '';
    background-color: var(--line-border-empty);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 4px;
    width: 100%;
    z-index: -1;
}

.progress {
    background-color: var(--line-border-fill);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 4px;
    width: 0%;
    z-index: -1;
    transition: 0.4s ease;
}

.circle {
    background-color: #fff;
    color: #999;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--line-border-empty);
    transition: 0.4s ease;
}

.circle.active {
    border-color: var(--line-border-fill);
}

.btn {
    background-color: var(--line-border-fill);
    color: #fff;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    padding: 8px 30px;
    margin: 5px;
    font-size: 14px;
}

.btn:active {
    transform: scale(0.98);
}

.btn:focus {
    outline: 0;
}

.btn:disabled {
    background-color: var(--line-border-empty);
    cursor: not-allowed;
}

三、添加 JS 文件

主要逻辑

1. 获取 progress、prev、next、circle、active 这 5 个节点
2. 初始化 currentActive 的值为 1
3. next 按钮用于使 currentActive 的值递增，且使 currentActive值最大等于 circles 节点数目 即最大限度为步骤数，然后再触发 updata()方法
4. prev 按钮用于使 currentActive 的值递减，且使 currentActive值最小等于 1 ，然后再触发 updata()方法
5. updata 方法用于
   • 添加 或 移除 类名 .active ;
   • 控制 progress 宽度，来控制哪一段变色
   • 控制 prev 和 next按钮是否被 disabled 禁用

const progress = document.querySelector('.progress')
const prev = document.getElementById('prev')
const next = document.getElementById('next')
const circles = document.querySelectorAll('.circle')

let currentActive = 1

next.addEventListener('click', () => {
    currentActive++

    if (currentActive > circles.length) {
        currentActive = circles.length
    }

    updata()
})

prev.addEventListener('click', () => {
    currentActive--

    if (currentActive < 1) {
        currentActive = 1
    }

    updata()
})

function updata() {
    circles.forEach((circle, idx) => {
        if (idx < currentActive) {
            circle.classList.add('active')
        } else {
            circle.classList.remove('active')
        }
    })

    const actives = document.querySelectorAll('.active')

    progress.style.width = (actives.length - 1) / (circles.length - 1) * 100 + '%'

    if (currentActive === 1) {
        prev.disabled = true
    } else if (currentActive === circles.length) {
        next.disabled = true
    } else {
        prev.disabled = false
        next.disabled = false
    }
}

❤️ 感谢大家

如果本文对你有帮助，就点个赞支持下吧，你的「赞」是我创作的动力。

如果你喜欢这篇文章的话，可以「点赞」 + 「收藏」 + 「转发」 给更多朋友。