带有角度中断的进度条

Question

我正在开发 Angular 应用程序，并希望有一个进度条，如附图所示。

我在网上看到了很多进度条，但我找不到这种类型的进度条。我怎样才能得到这种类型的进度条？

Answer 1

我想有没有更好的方法来做到这一点，但你可以让它绘制“分隔符”，然后你可以制作类似的东西

<div class="wrapper">
  <div class="progress" [style.width.%]="porc"></div>
  <div class="flex">
    <div *ngFor="let i of [0, 1, 2, 3, 4]" ></div>
  </div>
</div>

.wrapper
{
 display:flex;
 flex-direction:column;
}
.wrapper div
{
  height: 1rem;
}
.flex{
  display:flex;
  justify-content:space-evenly;
  margin-top:-1rem;
}
.flex div{
  width:.15rem;
  background: white;
}
.progress{
  background:steelblue;
}

见stackblitz

更新

这个想法是创建一个宽度等于变量“porc”的 div，[style.width.%]="porc"

“标记”实际上是一个宽度为 .15rem 的 div（在 .css 中是 .flex div）。您可以将background: white; 替换为background: silver; 以查看是否真的绘制了div。

当我们使用 css-flex 时，我们可以使用 justify-content:space-evenly 指示项目是分布的，以便任何两个项目之间的间距（以及到边缘的空间）相等

在代码中，我将具有类“.flex”的 div 的边距顶部设为 -1rem，与 divs- 的高度相同。我们也可以使用 margin-bottom:-1rem 应用于进度条

如果我们想创建一个组件，唯一的就是变量“porc”是@Input

我用一个组件和另一个相同的 .css 更新了 stackblitz

更新 2*

如果我们可以根据“porc”改变进度条的颜色，我们可以使用颜色的“getter”

get color(){
  if (this.porc>80)
     return 'red';
  if (this.porc>60)
     return 'orange';
  if (this.porc>40)
     return 'green';
  return yellow;
}

并使用

<div [style.background]="color" ...>