css - 垫子扩展面板显示禁用指示器并更改动画方向

Question

我正在尝试编辑 matexpansion 指标的 CSS。我希望箭头动画向内而不是向外转动，并且我希望指示器在禁用时仍然显示.要更改动画的方向，我在文档中阅读了有关使用的信息:const EXPANSION_PANEL_ANIMATION_TIMING: "225ms cubic-bezier(0.4,0.0,0.2,1)"; 但我不确定将其放置在何处在我的代码中，这是我的堆栈 Blitz :https://stackblitz.com/edit/angular-h2sodq?file=app%2Fexpansion-overview-example.ts

<mat-expansion-panel  hideToggle = "false" disabled = true>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal data
      </mat-panel-title>

Answer 1

要显示 chevron 或 indicator 即使面板被禁用，请尝试以下操作:

HTML

<mat-expansion-panel [disabled]="boolCondition">
  <mat-expansion-panel-header>
    <mat-panel-title>
      Personal data
      // you have to add the below span tag in every expansion panel with a condition
      <span *ngIf="boolCondition"  class="mat-expansion-indicator"></span>
    </mat-panel-title>
</mat-expansion-panel-header>

CSS

.mat-expansion-indicator::after {
   transform: rotate(225deg) !important;
}

// for the mat-expansion indicator to displayed when it is disabled
.mat-expansion-indicator {
   position: absolute;
   right: 55px;
}

stackblitz working demo