UI中的进度步骤【progress-step】实现指南

2023-06-10 13:41:26

Progress-Step：直观地传达流程的进展情况

了解Progress-Step

在现代数字体验中，清晰地传达流程或任务的进展情况至关重要。Progress-Step是一种直观的用户界面元素，它通过一系列按顺序排列的步骤或阶段，逐步展示任务的进展。每个步骤通常包含一个、一个进度条和一个指示其状态的视觉效果。

HTML结构

Progress-Step的HTML结构可以采用水平或垂直布局。以下是这两个布局的示例代码：

水平布局：

<div class="progress-step-container">
  <div class="progress-step active">
    <div class="step-number">1</div>
    <div class="step-title">第一步</div>
    <div class="step-progress-bar">
      <div class="step-progress"></div>
    </div>
  </div>
  <div class="progress-step">
    <div class="step-number">2</div>
    <div class="step-title">第二步</div>
    <div class="step-progress-bar">
      <div class="step-progress"></div>
    </div>
  </div>
  <div class="progress-step">
    <div class="step-number">3</div>
    <div class="step-title">第三步</div>
    <div class="step-progress-bar">
      <div class="step-progress"></div>
    </div>
  </div>
</div>

垂直布局：

<div class="progress-step-container">
  <div class="progress-step active">
    <div class="step-number">1</div>
    <div class="step-title">第一步</div>
    <div class="step-progress-bar">
      <div class="step-progress"></div>
    </div>
  </div>
  <div class="progress-step">
    <div class="step-number">2</div>
    <div class="step-title">第二步</div>
    <div class="step-progress-bar">
      <div class="step-progress"></div>
    </div>
  </div>
  <div class="progress-step">
    <div class="step-number">3</div>
    <div class="step-title">第三步</div>
    <div class="step-progress-bar">
      <div class="step-progress"></div>
    </div>
  </div>
</div>

CSS样式

Progress-Step的CSS样式可以根据所需的外观进行定制。以下示例演示了水平和垂直布局的样式：

水平布局：

.progress-step-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px;
}

.progress-step.active {
  background-color: #ccc;
}

.step-number {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.step-title {
  font-size: 16px;
  margin-bottom: 10px;
}

.step-progress-bar {
  width: 100%;
  height: 10px;
  background-color: #ddd;
  border-radius: 5px;
}

.step-progress {
  width: 0%;
  height: 10px;
  background-color: #000;
  border-radius: 5px;
}

垂直布局：

.progress-step-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.progress-step {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px;
}

.progress-step.active {
  background-color: #ccc;
}

.step-number {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.step-title {
  font-size: 16px;
  margin-bottom: 10px;
}

.step-progress-bar {
  width: 10px;
  height: 100%;
  background-color: #ddd;
  border-radius: 5px;
}

.step-progress {
  width: 10px;
  height: 0%;
  background-color: #000;
  border-radius: 5px;
}

实现步骤状态和进度条

为了在Progress-Step中实现步骤状态和进度条，可以使用JavaScript动态更新每个步骤的类名和进度条的宽度。以下JavaScript代码提供了一个示例：

const progressSteps = document.querySelectorAll('.progress-step');
const progressBars = document.querySelectorAll('.step-progress');

// 设置步骤状态
const setStepState = (step, state) => {
  step.classList.toggle('active', state);
};

// 设置进度条宽度
const setProgressBarWidth = (progressBar, width) => {
  progressBar.style.width = `${width}%`;
};

// 更新进度步骤
const updateProgressSteps = (stepIndex, progress) => {
  // 设置当前步骤为激活状态
  setStepState(progressSteps[stepIndex], true);

  // 设置当前步骤的进度条宽度
  setProgressBarWidth(progressBars[stepIndex], progress);

  // 设置后续步骤为未激活状态
  for (let i = stepIndex + 1; i < progressSteps.length; i++) {
    setStepState(progressSteps[i], false);
  }
};