angular - 使用多种颜色的 Angular Material 多进度条

Question

使用 Angular Material 实现多进度条的最佳方法是什么？

如果无法使用 Angular Material，有人可以向我推荐任何可以与 Angular 集成以实现相同效果的优秀图形库吗？

标签： angularangular-materialprogress-bar

Answer 1

我不知道有一种简单的方法可以在 Angular Material 中做到这一点。

最简单的方法可能是沿着这flex条路走，带有一些 css 样式。

我做了一个非常基本的Stackblitz来展示这个想法。然后您可以对所有这些进行 CSS 样式化并获得您想要的。

另一种方法是使用 SVG 构建栏。您可以实现更强大的效果，但其代价是您自己编写了一些 SVG（基本上是rect元素，然后您可以对其进行改进）。

编辑：OP 对 Stackblitz 的微调以匹配初始图像：https ://stackblitz.com/edit/angular-u2stx8 。