MDL: Изменение цвета неопределенной полосы хода?

Как изменить цвет неопределенного индикатора выполнения в Material Design Lite?MDL: Изменение цвета неопределенной полосы хода?

Я хотел бы бар, чтобы использовать цвет акцент я выбрал (розовый), когда я ссылаться

<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 в класс, но безрезультатно.

источник

2016-05-01 Dave Cruz

Ошибка в этой же проблеме. Видимо, 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>

источник

2016-06-10 06:50:49

Я также пришел через тот же вопрос при попытке использования материала конструкции , Мариус прав в заявлении:

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

Я попытался его ответ на codepen и он не работает для меня, но я сумел заставить его работать, добавив !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; 
}

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

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

источник

2017-09-05 13:26:51 RawToast

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

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

источник

2017-09-08 13:50:19 Pako

Ваш ответ только код. Пожалуйста, объясните немного, что вы делаете, чтобы помочь людям понять ваше решение. – quinz

Я пробовал с отключенным, но он не работает – Pako

MDL: Изменение цвета неопределенной полосы хода?

ответ

Смежные вопросы