如何更改进度条角度指令的颜色
Posted
技术标签:
【中文标题】如何更改进度条角度指令的颜色【英文标题】：How to Change Color of Progress Bar Angular Directive 【发布时间】：2015-08-26 06:25:09 【问题描述】：我想在我的应用程序中集成角度进度指令。
我找到了解决目的的进度条指令，但我无法更改进度条的颜色。我想为进度条提供自定义颜色。
有人对此有任何想法吗？
<!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
【问题讨论】：
这么多条，你需要改变哪个条的颜色？ 【参考方案1】：您可以通过更改<progressbar/> 指令的type 属性将颜色从预定义的颜色更改为另一种颜色。
<progressbar class="progress-striped" value="22" type="warning">22%</progressbar>
来自文档：
（默认值：null）：样式类型。可能的值是“主要”、“信息”、“成功”、“警告”、“危险”。
然后您可以通过在项目源代码中直接覆盖它们或在this page 中生成自定义构建来自定义这些颜色
【讨论】：
【参考方案2】：扩展this answer，您可以使用以下“hacky”方法更改Angular UI Progressbar 的颜色：
<uib-progressbar value="10" type="purple"></uib-progressbar>
这将生成一个类
.progress-bar-purple
您可以将其定义为 css 规则
.progress-bar-purple
background-color: purple;
【讨论】：
以上是关于如何更改进度条角度指令的颜色的主要内容，如果未能解决你的问题，请参考以下文章