기본 확장 패널 화살표의 화살표 스타일 변경

Question

아래 그림과 같이 각 확장 패널이 있습니다. 아니 확장

:

확장 :

는하지만 이런 식으로 뭔가에있는 화살표의 디자인을 변경하려면

어떻게? 아니면 각도 재료로 그렇게 할 수 있습니까? 아래 코드 :

HTML :

<md-expansion-panel> 
    <md-expansion-panel-header> 
    <md-panel-title> 
     Personal data 
    </md-panel-title> 
    <md-panel-description> 
     Type your name and age 
    </md-panel-description> 
    </md-expansion-panel-header> 

    <md-form-field> 
    <input mdInput placeholder="First name"> 
    </md-form-field> 

    <md-form-field> 
    <input mdInput placeholder="Age"> 
    </md-form-field> 
</md-expansion-panel> 

TS :

import {Component} from '@angular/core'; 

/** 
* @title Basic expansion panel 
*/ 
@Component({ 
    selector: 'expansion-overview-example', 
    templateUrl: 'expansion-overview-example.html', 
}) 
export class ExpansionOverviewExample {} 

Answer 1

예 가능합니다. 확장 패널에 참조 ID를 지정합니다. example으로 설정하고 hideToggle 속성을 true으로 설정하십시오.

<md-panel-description>에서 아이콘을 배치하고 패널의 expanded 속성을 사용하여 관련 아이콘을 표시하거나 숨길 수 있습니다.

.custom-header .mat-expansion-panel-header-title, 
.custom-header .mat-expansion-panel-header-description { 
    flex-basis: 0; 
} 

.custom-header .mat-expansion-panel-header-description { 
    justify-content: space-between; 
    align-items: center; 
} 

내가 사용한 재료 아이콘 :

<md-expansion-panel class="custom-header" hideToggle="true" #example> 
    <md-expansion-panel-header> 
     <md-panel-title> 
     Personal data 
     </md-panel-title> 
     <md-panel-description> 
     Type your name and age 
     <md-icon *ngIf="!example.expanded">play_arrow</md-icon> 
     <md-icon *ngIf="example.expanded">arrow_drop_down</md-icon> 
     </md-panel-description> 
    </md-expansion-panel-header> 

    <md-form-field> 
     <input mdInput placeholder="First name"> 
    </md-form-field> 

    <md-form-field> 
     <input mdInput placeholder="Age"> 
    </md-form-field> 
    </md-expansion-panel> 

은 component.css를에 다음 클래스를 추가, 아이콘과 패널 설명 사이의 공간을 제공합니다. 원하는 경우 사용자 지정 아이콘을 배치 할 수 있습니다. 다음은 stackblitz demo에 대한 링크입니다.