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，但无济于事。

Answer 1

遇到同样的问题。显然mdl-progress使用主题颜色进行显示和显示。没有直接的改变方法。我最后创建了一个附加类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));
}

然后，要将颜色应用到进度条 - 您只需指定新的类名：

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

Answer 2

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

遇到同样的问题。显然mdl-progress使用主题颜色进行显示和显示。没有直接的改变方法。

我已经在codepen上尝试过他的答案但它对我没有用，但我已经设法通过将!important添加到CSS来实现它。请参阅下文，基于材料进度条示例，第二个 - 自定义彩色条 - 基于Marius＆＃39;溶液：

<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：改变不确定进度条的颜色？

3 个答案: