Question

我正在尝试编辑matexpansion指标的CSS。我希望箭头动画向内而非向外，并且希望指示器在禁用时仍然显示，我尝试添加此属性hideToggle='false'，但在禁用时会覆盖它并隐藏指示器。为了更改动画的方向，我在文档中阅读了有关使用const EXPANSION_PANEL_ANIMATION_TIMING: "225ms cubic-bezier(0.4,0.0,0.2,1)";的信息，但不确定将其放入代码中，这是我的堆栈闪电：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

Mat Expansion Panel显示禁用的指示器并更改动画方向

1 个答案: