如何改變進度條角度指令的顏色
[英]How to Change Color of Progress Bar Angular Directive
問題描述
我想在我的應用程序中集成角度進度指令。
我發現進度條指令解決了目的，但我無法改變進度條的顏色。 我想為進度條提供自定義顏色。
有沒有人對此有任何想法？
<!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 Link： http ：//plnkr.co/edit/3AIJPQzQgosmlXV3QQ9D？p = preview
2 個解決方案
解決方案1
9 2016-05-12 12:52:48
擴展此答案 ，您可以使用以下“hacky”方法更改Angular UI Progressbar的顏色：
<uib-progressbar value="10" type="purple"></uib-progressbar>
這將生成一個類.progress-bar-purple
您可以將其定義為css規則
.progress-bar-purple {
background-color: purple;
}
解決方案2
2 2015-06-10 20:59:45
您可以通過更改<progressbar/>指令的type屬性將顏色從預定義顏色更改為另一種顏色。
<progressbar class="progress-striped" value="22" type="warning">22%</progressbar>
來自doc：
（默認值：null）：樣式類型。 可能的值是“主要”，“信息”，“成功”，“警告”，“危險”。
然后，您可以通過直接覆蓋項目源代碼中的顏色或在此頁面中生成自定義構建來自定義這些顏色
如何更改進度條的顏色
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.