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

材料2默认情况下，扩展面板的容器使用的是flexbox，因此我们需要使用flexbox方法来对齐内容，并且需要使用flex＆based＆＃39;是最好的方式。

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

Answer 2

您想将图标放入标题中。例如

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

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

2 个答案: