墊擴展面板組件圖標對齊問題

Question

我使用組件的可摺疊菜單，但圖標對齊不正確來對齊右側的文本，而不是左側，任何人可以建議如何實現這個問題。使用下面的代碼

：

<mat-expansion-panel class="mxSubMenuContainer"> 
      <mat-expansion-panel-header expandedHeight="48px" collapsedHeight="48px"> 
       <md-icon class="mat-icon mat-list-icon material-icons">pages</md-icon> 
       <mat-panel-title> 
        Personal data 
       </mat-panel-title> 
      </mat-expansion-panel-header> 

      <a mat-list-item class="sidenav-link mat-list-item mat-ripple" > 
       <div class="mat-list-item-content"> 
        <div class="mat-list-item-ripple mat-ripple" mat-ripple=""></div> 
        <md-icon class="mat-icon mat-list-icon material-icons">pages</md-icon> 
        <div class="mat-list-text"> 
         <span class="title mat-line" md-line="">Pages</span> 
        </div> 
        </div> 
      </a> 
      </mat-expansion-panel> 

預計UI

Answer 1

你要把圖標入題。例如

<mat-expansion-panel class="mxSubMenuContainer"> 
     <mat-expansion-panel-header expandedHeight="48px" collapsedHeight="48px"> 

      <mat-panel-title> 
       <md-icon class="mat-icon mat-list-icon material-icons">pages</md-icon> 
       Personal data 
      </mat-panel-title> 
     </mat-expansion-panel-header> 

     <a mat-list-item class="sidenav-link mat-list-item mat-ripple" > 
      <div class="mat-list-item-content"> 
       <div class="mat-list-item-ripple mat-ripple" mat-ripple=""></div> 
       <md-icon class="mat-icon mat-list-icon material-icons">pages</md-icon> 
       <div class="mat-list-text"> 
        <span class="title mat-line" md-line="">Pages</span> 
       </div> 
       </div> 
     </a></mat-expansion-panel> 

Answer 2

材料2擴展板的容器在默認情況下使用Flexbox的，所以我們需要使用Flexbox的方式來排列內容，併爲這種「柔性基礎」是最好的方式。

例如，在這樣的組件覆蓋CSS：

mat-panel-title { 
    flex-basis: 0; 
} 
mat-panel-description { 
    flex-basis: 100%; 
} 

我創建例如你問：https://stackblitz.com/edit/angular-b8whsd?file=app%2Fexpansion-overview-example.css