带有Angular 中断的进度条

发布于10月14日

我是在Angular 应用程序工作，并希望有一个进度条，如所附图片所示.

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

推荐答案

我想有没有更好的方法，但你可以画出"分隔符"，然后你就可以做这样的事情了

<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

Update个

其 idea 是创建一个div，其宽度百分比等于变量"porc"，即

"mark"实际上是一个宽度为.15rem的div(在.css中是.flex div).您可以将background: white;替换为background: silver;，以查看是否真正绘制了div.

当我们使用css-flex时，我们可以表示项目是分布的，因此任何两个项目之间的间距(以及到边缘的间距)都等于justify-content:space-evenly

在我的代码中，带有类".flex"的div的页边距顶部是-1rem，与div-的高度相同.我们还可以对进度条应用空白区:-1rem

如果我们想要创建一个组件，唯一的条件是变量"porc"是一个@Input

我用一个组件和另一个.css更新了Stackblitz

Update 2**

如果我们可以根据"porc"更改进度条的 colored颜色，我们就可以使用 colored颜色的"getter".

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

并使用