如何更改進度欄的顏色角度指令

我找到了解決目的的進度條指令，但是我無法更改進度條的顏色。我想爲進度條提供自定義顏色。

有沒有人有這方面的想法？

<!doctype html> 
<html ng-app="ui.bootstrap.demo"> 
    <head> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script> 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script> 
    <script src="example.js"></script> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
    </head> 
    <body> 

<div ng-controller="ProgressDemoCtrl"> 

    <h3>Static</h3> 
    <div class="row"> 
     <div class="col-sm-4"><progressbar value="55"></progressbar></div> 
     <div class="col-sm-4"><progressbar class="progress-striped" value="22" type="warning">22%</progressbar></div> 
     <div class="col-sm-4"><progressbar class="progress-striped active" max="200" value="166" type="danger"><i>166/200</i></progressbar></div> 
    </div> 

    <hr /> 
    <h3>Dynamic <button class="btn btn-sm btn-primary" type="button" ng-click="random()">Randomize</button></h3> 
    <progressbar max="max" value="dynamic"><span style="color:black; white-space:nowrap;">{{dynamic}}/{{max}}</span></progressbar> 

    <small><em>No animation</em></small> 
    <progressbar animate="false" value="dynamic" type="success"><b>{{dynamic}}%</b></progressbar> 

    <small><em>Object (changes type based on value)</em></small> 
    <progressbar class="progress-striped active" value="dynamic" type="{{type}}">{{type}} <i ng-show="showWarning">!!! Watch out !!!</i></progressbar> 

    <hr /> 
    <h3>Stacked <button class="btn btn-sm btn-primary" type="button" ng-click="randomStacked()">Randomize</button></h3> 
    <progress><bar ng-repeat="bar in stacked track by $index" value="bar.value" type="{{bar.type}}"><span ng-hide="bar.value < 5">{{bar.value}}%</span></bar></progress> 

</div> 
    </body> 
</html>

Plunker鏈接：http://plnkr.co/edit/3AIJPQzQgosmlXV3QQ9D?p=preview

來源

2015-06-10 Aamir Khan

有很多酒吧，您需要哪些酒吧顏色變化？ –

您可以通過改變<progressbar/>指令的type屬性改變從預定義的一個到另一個顏色。

<progressbar class="progress-striped" value="22" type="warning">22%</progressbar>

從DOC：

（缺省：空）：風格類型。可能的值是「主要」，「信息」，「成功」，「警告」，「危險」。

然後你就可以直接覆蓋這些項目源代碼或在this page

來源

2015-06-10 20:59:45 Freezystem

擴展this answer生成自定義生成自定義這些顏色，你可以使用下面的「哈克更改Angular UI進度的顏色「方法：

<uib-progressbar value="10" type="purple"></uib-progressbar>

，這將產生一類 .progress-bar-purple

您可以將其定義爲css規則

.progress-bar-purple { 
    background-color: purple; 
}

來源

2016-05-12 12:52:48

如何更改進度欄的顏色角度指令

回答

相關問題