关于html：Angular Material Stepper：样式化活动标题


Angular Material Stepper: Styling the Active Header

我正在使用Angular Material Stepper，并希望设置所选标题的样式，使其具有蓝色背景的圆角边框。现在正在使用的CSS是：

1
2
3
4
5
6
7
::ng-deep .mat-step-header  {
  background-color: #00A9CE;;
  border-radius: 32px;
  width: 100%;
  font-weight: 10px;
  color: #FFFFFF;
}

css可以，但是它适用于所有步骤，但是我只希望将其应用于选定的标头。有一个类似.mat-step-icon-selected的类可以定位所选的图标，但是没有等效的对象可以定位所选的标题。

我希望所选步骤看起来像下面的图像((2)水果-它具有带蓝色背景的圆形边框)，并且仅在所选步骤上。

enter

1
<mat-step-header role="tab">

带有角色选项卡的元素还包含众所周知的aria属性，用于保存选项卡的状态。还有一个aria-selected属性，指示是否选择了mat-step-header。

1
<mat-step-header role="tab" aria-selected="true">

现在我们知道可以使用aria属性来设置所选步骤标题的样式：

1
2
3
4
5
6
7
8
9
10
::ng-deep .mat-step-header[aria-selected="true"]  {
  background-color: #00A9CE;;
  border-radius: 32px;
  width: 100%;
  font-weight: 10px;

  & div.mat-step-label.mat-step-label-active.mat-step-label-selected {
      color: #FFF;
  }
}

有关aria和role = " tab "

的其他资源

相关讨论