垫扩展面板显示禁用指示器并更改动画方向答案

【问题标题】：Mat Expansion Panel show indicator on disabled and change direction of animation垫扩展面板显示禁用指示器并更改动画方向
【发布时间】：2019-11-10 15:16:33
【问题描述】：

我正在尝试编辑 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>

【问题讨论】：

检查我根据您的stackblitz demo所做的更改我的理解是否正确？
是的！没有意识到至少对于旋转部分来说它是如此简单谢谢。即使在禁用时也显示指标的任何想法
如果您按照 UX 考虑，如果 expansion-panel 被禁用，最好不要显示 indicator'，因为它会导致不良 UX。
好的，让我看看如何解决这个问题。
请检查我的回答。这是根据您的要求

标签： css angular animation angular-material

【解决方案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

【讨论】：

从 CSS 中删除这个 .mat-expansion-indicator::after { transform: rotate(225deg) !important; }。也许你必须接受默认行为。
那么没有别的办法了吗？
据我了解，您希望指标以与当前默认行为完全相反的方式打开，对吧？
原来垫子扩展在右侧并向内容（左侧）向内打开，但我将指示器移到标题旁边的左侧这就是为什么我希望它向左打开并且它工作正常。但是现在当面板打开时，指示器指向下方而不是向上
您是否删除了 CSS .mat-expansion-indicator::after { transform: rotate(225deg) !important; }，因为这会使指标的行为有所不同