MDL: изменение цвета неопределенного индикатора выполнения?

Как изменить цвет неопределенного индикатора выполнения в 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, но безрезультатно.


material-design material-design-lite
person David Cruz    schedule 01.05.2016    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Столкнулся с той же проблемой. Очевидно mdl-progress использует цвет темы для отображения, и нет прямого способа изменить это. В итоге я создал дополнительный класс mdl-progress-red, который я присоединяю к mdl-progress только для того, чтобы установить цвет дочерних элементов. Ниже приведен CSS для красного rgb(255,0,0). Если вы хотите изменить цвет, просто замените 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>
person Marius Bughiu    schedule 10.06.2016

arrow_upward
2
arrow_downward

Я также столкнулся с той же проблемой при тестировании Material Design. Мариус прав, говоря:

Столкнулся с той же проблемой. Очевидно, mdl-progress использует цвет темы для отображения, и нет прямого способа изменить это.

Я пробовал его ответ на коде, и у меня это не сработало, но мне удалось заставить его работать, добавив !important в CSS. См. Ниже, на основе примера индикатора выполнения материала со второй полосой настраиваемого цвета, основанной на решении Мариуса:

<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);
  });
person RawToast    schedule 05.09.2017

arrow_upward
0
arrow_downward

этот код создает четыре индикатора выполнения с красным, оранжевым, желтым и зеленым цветом

.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>

введите описание изображения здесь

person Pako    schedule 08.09.2017
comment
Ваш ответ - всего лишь код. Пожалуйста, объясните немного, что вы делаете, чтобы помочь людям понять ваше решение. - person quinz; 08.09.2017