web-dev-qa-db-ja.com

左側のangularマテリアル拡張パネルの矢印アイコンの作り方

angular materialを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>
angulartypescriptangular-material
6
Govinda raj

最初に、app.module.tsファイルのangularマテリアルアイコンと拡張パネルモジュールをインポートする必要があります。

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

ありがとう、

13
AddWeb Solution Pvt Ltd

Cssを使用して私のために働いた：

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

Angular Material 8.1.xの時点で、@Input() togglePosition- decoratorを使用できます。

ドキュメントには次のように記載されています

@Input（）togglePosition：MatAccordionTogglePosition |展開インジケーターの位置。

次のようにアコーディオンに追加します：<mat-accordion [togglePosition]="'before'">

例とStackblitz

3
John

関数と変数を追加する必要はありません。このスタイルを追加するだけです：

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

Angular Decorator "@indicatorRotate"を使用します

   <mat-icon [@indicatorRotate]="expanded ? 'expanded': 'collapsed'">
     expand_more
  </mat-icon>
0
Thiago Lúcio