如果您希望将Angular Material进度条的两个值对齐,你可以使用以下代码示例:
在HTML模板中:
在CSS样式表中:
.progress-bar {
height: 20px;
}
.mat-progress-bar-primary {
background-color: red;
}
.mat-progress-bar-secondary {
background-color: green;
}
在组件类中,您可以设置相应的值:
import { Component } from '@angular/core';
@Component({
selector: 'app-progress-bar',
templateUrl: './progress-bar.component.html',
styleUrls: ['./progress-bar.component.css']
})
export class ProgressBarComponent {
value1 = 50;
value2 = 80;
}
这样,您将得到两个进度条,使用value1
和value2
来设置其对应的值,并使用CSS样式来设置它们的高度和背景颜色。
请注意,您需要确保已经正确导入和使用了Angular Material库。