使用多种颜色的 Angular Material 多进度条答案

【问题标题】：Angular Material Multi Progress Bar using multiple colors使用多种颜色的 Angular Material 多进度条
【发布时间】：2019-05-08 08:24:35
【问题描述】：

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

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

【问题讨论】：

标签： angular angular-material progress-bar

【解决方案1】：

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

最简单的方法可能是沿着flex 的路走下去，加上一些css 样式。

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

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

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

【讨论】：

我扩展了它以获得类似stackblitz.com/edit/angular-u2stx8
不错，就是这个主意。然后你使用带有动态值的[fxFlex]，你就有了你的进度条。我用你的链接编辑了答案以获得完整的答案。

【解决方案2】：

您可以轻松实现双色材质进度条，然后您可以使用buffer属性添加一些烟花。

第一步是在html中添加进度条。我用“口音”作为颜色。

<mat-progress-bar mode="indeterminate" color="accent"></mat-progress-bar>

然后你必须将MatProgressBarModule 导入到你的 app.module.ts 文件中

接下来，您必须在 styles.scss 中使用您喜欢的颜色定义强调色：

$accent: (
  50: red,
  100: blue,
  200: green,
  contrast: (
    50: pink
  )
);

$my-app-accent:  mat-palette($accent, 50, 100, 200);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent);

如果您在主题化角度材料时遇到任何问题，请查看手册：https://material.angular.io/guide/theming

【讨论】：