logo标签列表

如何更改进度条Angular指令的颜色

htmlcssangularjsangularjs-directivedirective
5
我希望在我的应用程序中集成angular进度指令。
我找到了进度条指令来实现这个目的，但是我无法更改进度条的颜色。我想要为进度条提供自定义颜色。
有人对此有任何想法吗？
<!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
有这么多的条形图，你需要改变哪个条形图的颜色？ - m4n0
2个回答
10

继承这个答案，你可以使用以下"hacky"方法改变Angular UI进度条的颜色：

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

这将生成一个类.progress-bar-purple

你可以将其定义为CSS规则。

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

您可以通过更改<progressbar/>指令的type属性，将预定义的颜色更改为其他颜色。

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

来自文档：

(默认值：null)：样式类型。可能的值为'primary'、'info'、'success'、'warning'、'danger'。

然后，您可以通过直接覆盖项目源代码中的这些颜色或在此页面生成自定义构建来定制这些颜色。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接