Question

升级角度材料到4.0，在我的应用程序中使用按要求，扩展箭头必须位于面板的左侧，默认情况下它显示在右侧。检查对齐选项是否没有。

    <mat-expansion-panel expanded='true'>
  <mat-expansion-panel-header [ngClass]="tickets-container-header">
    <mat-panel-title>
        <div  class="col-md-9">
        {{header}} 
        </div>
    </mat-panel-title>

  </mat-expansion-panel-header>
</mat-expansion-panel>

Answer 1

首先，您需要在app.module.ts文件中导入角度材质图标和扩展面板模块，

import {MatExpansionModule,MatIconModule} from '@angular/material';
...
@NgModule({
  ...
  imports: [
    MatExpansionModule,
    MatIconModule 
  ]
  ...
})
export class AppModule { }

在HTML文件中添加此代码

    <mat-expansion-panel expanded='true' hideToggle="true" (click)="click()">
      <mat-expansion-panel-header [ngClass]="tickets-container-header">
        <mat-panel-title>
            <mat-icon>{{icon  ? 'keyboard_arrow_down' : 'keyboard_arrow_up' }}</mat-icon>
            <div  class="col-md-9">
            {{header}} 
            </div>
        </mat-panel-title>

      </mat-expansion-panel-header>
    </mat-expansion-panel>

在组件文件

中添加此代码

icon: boolean = false;

click(){
    this.icon = !this.icon;
  }

谢谢，

Answer 2

仅使用css为我工作：

.mat-expansion-indicator {
    position: absolute;
    left: 15px;
  }

Answer 3

只需在面板标题上添加“ mat-expansion-toggle-indicator-before”类。示例：

- set_fact:
    my_result: "{% if log_result_1.stat.exists %} {{ log_result_1 }} {% elif log_result_2 is not skipped and log_result_2.stat.exists %} {{ log_result_2 }} {% endif %}"

Answer 4

无需添加函数和变量。只需添加此样式：

.mat-expansion-panel-header > span.mat-content {
    order: 2;    
}

Answer 5

从Angular Material 8.1.x开始，您可以使用@Input() togglePosition装饰器。

The documentation states the following

@Input（）togglePosition：MatAccordionTogglePosition |扩展指示器的位置。

像这样<mat-accordion [togglePosition]="'before'">

将其添加到手风琴中

这里是Stackblitz with an example

Answer 6

使用角度装饰器“ @indicatorRotate”

   <mat-icon [@indicatorRotate]="expanded ? 'expanded': 'collapsed'">
     expand_more
  </mat-icon>

如何在左侧制作角度材料扩展面板箭头图标

6 个答案: