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

2024-01-08

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

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

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

该文档说明了以下内容 https://material.angular.io/components/expansion/api#MatExpansionPanel

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

将其添加到手风琴中,如下所示:<mat-accordion [togglePosition]="'before'">

这里有一个Stackblitz 的一个例子 https://stackblitz.com/edit/togglechevron-expansion-panel

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将 Angular Material 扩展面板箭头图标放置在左侧 的相关文章