如何将Angular Material扩展面板的箭头图标放置在左侧 [英] How to position the Angular Material expansion panel arrow icon on the left-hand side
本文介绍了如何将Angular Material扩展面板的箭头图标放置在左侧的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我已在我的应用程序中将Angular Material升级到4.0.我正在按要求使用<mat-expansion-panel>
.扩展箭头必须在面板的左侧,但默认情况下显示在右侧.我已经检查了align选项,但没有得到所需的东西.
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>
推荐答案
首先,您需要在app.module.ts文件中导入角材图标和扩展面板模块,
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 { }
将此代码添加到您的HTML文件中,
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;
}
谢谢
这篇关于如何将Angular Material扩展面板的箭头图标放置在左侧的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文