如何将 Angular Material 扩展面板箭头图标定位在左侧

Posted 2023-03-13

【中文标题】如何将 Angular Material 扩展面板箭头图标定位在左侧

【英文标题】：How to position the Angular Material expansion panel arrow icon on the left-hand side

【发布时间】：2018-04-12 10:14:27

【问题描述】：

我已在我的应用程序中将 Angular Material 升级到 4.0。我根据要求使用<mat-expansion-panel>。扩展箭头必须在面板的左侧，但默认情况下它显示在右侧。我检查了 align 选项，但没有得到我需要的。

<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>

【参考方案1】：

您可以使用togglePosition 属性将切换箭头的位置设置在标题之前。

<mat-expansion-panel expanded='true' togglePosition="before">
   <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>

它在文档的 API 部分中可用。 https://material.angular.io/components/expansion/api#MatAccordionTogglePosition

【参考方案2】：

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

<mat-expansion-panel>
<mat-expansion-panel-header class="mat-expansion-toggle-indicator-before">
    <mat-panel-title>
        A title!
    </mat-panel-title>
</mat-expansion-panel-header>

【讨论】：

为我工作。扩展箭头现在位于右侧。谢谢！

【参考方案3】：

使用 Angular 装饰器“@indicatorRotate”

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

【参考方案4】：

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

The documentation states the following

@Input() 切换位置：MatAccordionTogglePosition |展开指示器的位置。

像这样将它添加到手风琴中：<mat-accordion [togglePosition]="'before'">

这是Stackblitz with an example

【参考方案5】：

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

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

【讨论】：

不要在cmets中贴代码相关的备注，你可以edit你的答案并包含在里面

【参考方案6】：

只使用 css 为我工作：

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

【讨论】：

我最初尝试过这个，并注意到当手风琴在嵌套扩展面板时动画时出现了一些奇怪的画面。接受的答案在渲染时提供了更好的性能。

【参考方案7】：

首先需要在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;
  

谢谢，

【讨论】：

hideToggle 不能用于隐藏箭头，使用我已经完成的 css。谢谢。

您可以在面板上使用#panel（即<mat-expansion-panel #panel ...）而不是使用icon 字段，并在mat-icon 元素中使用panel.expanded ? 'keyboard-arrow-up' : 'keyboard-arrow-down' ...这将删除需要click 事件处理程序。