gpt4 book ai didi

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

转载 作者:技术小花猫 更新时间:2023-10-29 11:51:56 25 4
gpt4 key购买 nike

我想在我的应用程序中集成 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

最佳答案

扩展this answer , 你可以改变 Angular UI 的颜色使用以下“hacky”方法的进度条:

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

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

您可以将其定义为 css 规则

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

关于html - 如何更改进度条 Angular 指令的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30765863/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com