如何在左侧放置 Angular Material 扩展面板箭头图标 [英] How to position the Angular Material expansion panel arrow icon on the left-hand side

问题描述

我已在我的应用中将 Angular Material 升级到 4.0.我根据要求使用 .扩展箭头必须在面板的左侧，但默认情况下它显示在右侧.我已经检查了 align 选项，但我没有得到我需要的东西.

<mat-expansion-panel-header [ngClass]="tickets-container-header"><mat-panel-title><div class="col-md-9">{{标题}}

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

解决方案

首先需要在app.module.ts文件中导入angular material icon和扩展面板模块，

import {MatExpansionModule,MatIconModule} from '@angular/material';...@NgModule({...进口:[垫扩展模块，MatIcon模块]...})导出类 AppModule { }

将此代码添加到您的 HTML 文件中，

 <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">{{标题}}

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

将此代码添加到您的组件文件中，

icon: boolean = false;点击(){this.icon = !this.icon;}

谢谢，

I have upgraded Angular Material to 4.0 in my app. I am using the <mat-expansion-panel> as per requirement. The expansion arrow has to be on the left-hand side of the panel, but by default it's displaying on the right-hand side. I have checked for the align option, but I didn't get what I need.

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

解决方案

first you need to import angular material icon and expansion panel module in app.module.ts file,

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

Add this code in your HTML file,

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

Add this code in your component file,

icon: boolean = false;

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

Thanks,

这篇关于如何在左侧放置 Angular Material 扩展面板箭头图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！