Angular Material Stepper：设计活动标题

Question

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

::ng-deep .mat-step-header  {
  background-color: #00A9CE;;
  border-radius: 32px;
  width: 100%;
  font-weight: 10px;
  color: #FFFFFF;
}

css 没问题，但它适用于所有步骤，但我只希望它适用于选定的标题。有一个类像.mat-step-icon-selected定位选定的图标，但没有等效的定位选定的标题。

我希望所选步骤如下图所示（(2) Fruits - 它具有蓝色背景的圆形边框）并且它仅在所选步骤上。

我只对我可以用来定位所选标题的类名感兴趣。我试过了，.mat-step-header-selected但没有用。

Answer 1

mat-step-header 具有值为“tab”的角色属性

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

具有角色选项卡的元素还包含已知的 aria 属性，这些属性保存选项卡的状态。还有一个 aria-selected 属性，指示是否选择了 mat-step-header。

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

现在我们知道了 aria 属性，我们可以去设置所选步骤标题的样式：

::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" 的其他资源