要给Angular Material Stepper的头部水平线和底部边框添加CSS样式,可以使用以下代码示例:
HTML代码:
Step 1
Step 2
Step 3
CSS代码:
.mat-step-header {
border-bottom: 1px solid #ccc; /* 底部边框样式 */
}
.mat-step-header .mat-step-label {
position: relative;
}
.mat-step-header .mat-horizontal-stepper-header-line {
position: absolute;
top: 50%; /* 调整水平线位置 */
left: 0;
width: 100%;
height: 1px;
background-color: #ccc; /* 水平线颜色 */
}
.mat-step-header .mat-step-label-active .mat-horizontal-stepper-header-line {
background-color: #007bff; /* 活动步骤的水平线颜色 */
}
这些CSS样式将为Angular Material Stepper的头部添加底部边框和水平线。可以根据需要调整样式属性。