angular - 垫扩展面板组件图标对齐问题

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>

预期用户界面

Answer 1

Material 2 Expansion 面板的容器默认使用 flexbox，所以我们需要使用 flexbox 方法来对齐内容，对于这种 'flex-basis' 是最好的方法。

例如，以这种方式覆盖组件中的 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