MDL：改变不确定进度条的颜色？

Question

如何在 Material Design Lite 中更改不确定进度条的颜色？

我希望栏使用我在调用时选择的强调色（粉红色）

    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">

这是当前进度条的行：

<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate" style="width: 100%"></div>

我尝试将 mdl-color--pink-500 和 mdl-color-text--pink-500 添加到 class，但没有成功。

Answer 1

运行成同样的问题。显然 mdl-progress 使用主题颜色进行显示并且没有直接的方法来更改它。我最终创建了一个额外的 class mdl-progress-red 附加到 mdl-progress 只是为了我可以设置子元素的颜色。下面是红色 rgb(255,0,0) 的 CSS。如果您想更改颜色，只需将下面样式中的 rgb(255,0,0) 替换为您想要的颜色即可。

.mdl-progress-red > .progressbar {
    background-color: rgb(255,0,0);
}

.mdl-progress-red > .bufferbar {
    background-image: linear-gradient(to right, rgba(255,255,255, 0.7), rgba(255,255,255, 0.7)), linear-gradient(to right, rgb(255,0,0), rgb(255,0,0));
}

.mdl-progress-red > .auxbar {
    background-image: linear-gradient(to right, rgba(255,255,255, 0.9), rgba(255,255,255, 0.9)), linear-gradient(to right, rgb(255,0,0), rgb(255,0,0));
}

然后，要将颜色应用于进度条 - 您只需指定新的 class 名称，如下所示：

<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate mdl-progress-red" style="width: 100%"></div>

Answer 2

我在尝试 Material 设计时也遇到过同样的问题。马吕斯的说法是正确的：

Ran into the same problem. Apparently mdl-progress uses the theme color for display & there's no straight-forward way to change that.

我已经在 codepen 上尝试过他的回答，但它对我不起作用，但我通过将 !important 添加到 CSS 来设法让它工作。见下文，基于 Material 进度条示例，第二个自定义彩色条基于 Marius 的解决方案：

<html>
  <head>
    <!-- Material Design Lite -->
    <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <!-- Material Design icon font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <body>
    <!-- Simple MDL Progress Bar -->
    <div id="p1" class="mdl-progress mdl-js-progress"></div>
    <br></br>
    <div id="p2" class="mdl-progress mdl-js-progress mdl-progress-red"</div>
  </body>
</html>

CSS

body {
  padding: 20px;
  background: #fafafa;
  position: relative;
}

.mdl-progress-red > .bufferbar {
    background-image: linear-gradient(to right, rgba(255,255,255, 0.7), rgba(255,255,255, 0.7)), linear-gradient(to right, rgb(255,0,0), rgb(255,0,0))  !important;
}

.mdl-progress-red > .auxbar {
    background-image: linear-gradient(to right, rgba(255,255,255, 0.9), rgba(255,255,255, 0.9)), linear-gradient(to right, rgb(255,0,0), rgb(255,0,0))  !important;
}

.mdl-progress-red > .progressbar {
    background-color: rgb(255,0,0) !important;
}

JS

document.querySelector('#p1').addEventListener('mdl-componentupgraded', function() {
    this.MaterialProgress.setProgress(44);
  });

document.querySelector('#p2').addEventListener('mdl-componentupgraded', function() {
    this.MaterialProgress.setProgress(44);
  });

Answer 3

此代码创建了四个进度条，分别为红色、橙色、黄色和绿色

.mdl-progress-red > .bufferbar {
    background-image: linear-gradient(to right, rgba(255,255,255, 0.7), rgba(255,255,255, 0.7)), linear-gradient(to right, rgb(255,0,0), rgb(255,0,0))  !important;
}

.mdl-progress-red > .auxbar {
    background-image: linear-gradient(to right, rgba(255,255,255, 0.9), rgba(255,255,255, 0.9)), linear-gradient(to right, rgb(255,0,0), rgb(255,0,0))  !important;
}

.mdl-progress-red > .progressbar {
    background-color: rgb(255,0,0) !important;
}

.mdl-progress-orange > .bufferbar {
    background-image: linear-gradient(to right, rgba(255,227,199, 0.7), rgba(255,227,199, 0.7)), linear-gradient(to right, rgb(255,145,0), rgb(255,145,0))  !important;
}

.mdl-progress-orange > .auxbar {
    background-image: linear-gradient(to right, rgba(255,227,199, 0.9), rgba(255,227,199, 0.9)), linear-gradient(to right, rgb(255,145,0), rgb(255,145,0))  !important;
}

.mdl-progress-orange > .progressbar {
    background-color: rgb(255,145,0) !important;
}

.mdl-progress-yellow > .bufferbar {
    background-image: linear-gradient(to right, rgba(255,255,206, 0.7), rgba(255,255,206, 0.7)), linear-gradient(to right, rgb(240,220,0), rgb(240,220,0))  !important;
}

.mdl-progress-yellow > .auxbar {
    background-image: linear-gradient(to right, rgba(255,255,206, 0.9), rgba(255,255,206, 0.9)), linear-gradient(to right, rgb(240,220,0), rgb(240,220,0))  !important;
}

.mdl-progress-yellow > .progressbar {
    background-color: rgb(240,220,0) !important;
}

.mdl-progress-green > .bufferbar {
    background-image: linear-gradient(to right, rgba(214,255,214, 0.7), rgba(214,255,214, 0.7)), linear-gradient(to right, rgb(0,153,0), rgb(0,153,0))  !important;
}

.mdl-progress-green > .auxbar {
    background-image: linear-gradient(to right, rgba(214,255,214, 0.9), rgba(214,255,214, 0.9)), linear-gradient(to right, rgb(0,153,0), rgb(0,153,0))  !important;
}

.mdl-progress-green > .progressbar {
    background-color: rgb(0,153,0) !important;
}

例子四进度条

<div id="p1" class="mdl-progress mdl-js-progress mdl-progress-red"></div>
<br/><br/>
<div id="p2" class="mdl-progress mdl-js-progress mdl-progress-orange"></div>
<br/><br/>
<div id="p3" class="mdl-progress mdl-js-progress mdl-progress-yellow"></div>
<br/><br/>
<div id="p4" class="mdl-progress mdl-js-progress mdl-progress-green"></div>
<script>
document.querySelector('#p1').addEventListener('mdl-componentupgraded', function() {
    this.MaterialProgress.setProgress(44);
  });

document.querySelector('#p2').addEventListener('mdl-componentupgraded', function() {
    this.MaterialProgress.setProgress(44);
  });
document.querySelector('#p3').addEventListener('mdl-componentupgraded', function() {
    this.MaterialProgress.setProgress(44);
  });
document.querySelector('#p4').addEventListener('mdl-componentupgraded', function() {
    this.MaterialProgress.setProgress(44);
  });

</script>

MDL：改变不确定进度条的颜色？

MDL: Changing Color of Indeterminate Progress Bar?

material-design

material-design-lite