我正在为进度条编辑现有代码。最初,进度条只能接受进度值[min, max, progress]。例如 [min=0, max=100, progress=30]。
我想添加可以改变颜色的新输入。例如,如果 color="yellow",则进度条颜色为黄色。我该怎么做?
我想让 CLASS 值 (progress-bar.html) 可变。
我尝试了几种方法,但由于对语法缺乏了解,我没有成功。
主要.html
<progress-bar [min]="0" [max]="100" [progress]="30" [color]="yellow">
</progress-bar>
进度条.ts
export class ProgressBarComponent {
@Input()
progress: number;
@Input()
min: number;
@Input()
max: number;
@Input()
color: any;
constructor() {
}
进度条.html
<div style="display:flex;padding-bottom:5px;">
<div class="red" [style.width]="((progress/max) *100) + '%'"></div>
<div class="background-bar" [style.width]="(100-((progress/max) *100)) + '%'"></div>
进度条.scss
.red{
height:10px;
margin-top:20px;
background-color:#E64B55;
-webkit-transition: width 2s;
transition: width 2s;
}
.yellow{
height:10px;
margin-top:20px;
background-color:#db6623;
-webkit-transition: width 2s;
transition: width 2s;
}
.background-bar{
height:10px;
margin-top:20px;
margin-left:0px;
background-color:lightgrey;
}
最佳答案
为 div 设置 class={{color}} .div class="warning {{color}}"的背景颜色,这是您从父组件输入的颜色。
关于javascript - 如何将值传递给 DIV 标记中的 CLASS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43146022/