如何实现 Material Design 中的 Stepper 控件

Stepper 控件是一种常见的 Material Design 设计风格中的交互控件。通常用于引导用户在多个步骤中完成复杂操作，如登陆、注册、填写表单等。在本文中，我们将指导您如何使用 HTML、CSS 和 JavaScript 实现这个控件。

第一步：HTML 结构

首先我们需要构建一个 Stepper 控件的 HTML 结构。一般来说，Stepper 控件由若干个步骤构成，每个步骤包含一个标题和一个描述。还有一个激活线标记当前活动的步骤。

<div class="stepper">
  <div class="step active">
    <div class="step-title">Step 1</div>
    <div class="step-desc">Fill in your personal information</div>
  </div>
  <div class="step">
    <div class="step-title">Step 2</div>
    <div class="step-desc">Choose your payment method</div>
  </div>
  <div class="step">
    <div class="step-title">Step 3</div>
    <div class="step-desc">Review your order</div>
  </div>
  <div class="line"></div>
</div>

在上面的代码中，我们使用 div 元素来表示 Stepper 和每个步骤，使用 class 属性来标识它们的样式和状态。

第二步：CSS 样式

通过 CSS，我们可以定义 Stepper 和每个步骤的样式。我们使用 display: flex 属性使其成为一个水平排列的容器，并根据当前活动步骤来确定激活线的位置。

.stepper {
  display: flex;
}

.step {
  margin-right: 30px;
}

.step-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}

.step-desc {
  font-size: 14px;
  color: #999;
}

.active .step-title {
  color: #2196f3;
}

.line {
  height: 1px;
  background: #ddd;
  flex: 1;
  margin-top: 10px;
  position: relative;
}

.active:after {
  content: "";
  width: 12px;
  height: 12px;
  background: #2196f3;
  border-radius: 50%;
  position: absolute;
  top: -6px;
  right: -6px;
}

在上面的代码中，我们为 .stepper 容器设置了 display: flex 属性使其为水平排列，并利用 .step 样式将步骤组件每列占位。我们还定义了激活的步骤类 .active 的样式，包括颜色、线条位置和激活线的状态。

第三步：JavaScript

通过 JavaScript，我们可以实现交互功能以及动态更新 Stepper 控件。我们需要添加一些事件监听器，以响应用户的操作。 这里我们使用 jQuery 库来简化代码编写。

$(document).ready(function() {
  var currentStep = 1;

  $(".step").click(function() {
    $(".step").removeClass("active");
    $(this).addClass("active");
    currentStep = $(this).index() + 1;

    $(".line").css("width", (currentStep - 1) * 33.333 + "%");
  });
});

在上面的代码中，我们首先使用 var 关键字声明并初始化一个 currentStep 变量为 1，表示当前步骤的索引。

然后，我们为每个步骤元素安装一个 click 事件监听器，当用户点击一个步骤时，我们会执行一系列操作。我们首先将所有步骤元素的 active 类移除，然后将当前点击的元素添加 active 类。然后，我们使用 jQuery 的 index 方法取得当前点击的步骤的索引值，并更新 currentStep 变量。最后，我们更新激活线的宽度，初始状态下的激活线的宽度为零，通过通过计算宽度（每个步骤 33.333%）并设置该值即可更新激活线的位置。

示例代码

完整的示例代码可以在以下 gist 中找到：

https://gist.github.com/anonymous/0df14e144c960ba7125100f761a01c04

输入以下命令以在本地运行上面的 demo：

git clone https://gist.github.com/anonymous/0df14e144c960ba7125100f761a01c04
cd 0df14e144c960ba7125100f761a01c04
open index.html

总结

在本文中，我们深入学习了如何使用 HTML、CSS 和 JavaScript 实现一个 Material Design 风格的 Stepper 控件。希望这篇文章对您有所帮助，并激发您在接下来的前端学习中的灵感。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659f49d6add4f0e0ff7f5044