Question

我正在尝试使说明在垫面板中看起来更加对齐。如果一个字段比另一个字段长，它将所有内容推向右侧。如何使描述保持一致？

<mat-accordion>
  <mat-expansion-panel [expanded]="allExpandState">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Account #: {{accountNumber}}
      </mat-panel-title>
      <mat-panel-description>
        {{type}}
      </mat-panel-description>
      <mat-panel-description>
        {{date}}
      </mat-panel-description>
      <mat-panel-description>
        {{value}}
      </mat-panel-description>
    </mat-expansion-panel-header>
  </mat-expansion-panel>
  <!-- ... -->
</mat-accordion>

现在的样子：

Answer 1

您可以只创建一个mat-panel-description，然后在其中创建一个表格以对齐您的值。

<mat-accordion>
  <mat-expansion-panel [expanded]="allExpandState">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Account #: {{accountNumber}}
      </mat-panel-title>
      <mat-panel-description>
        <table>
          <tr>
            <td>Value</td>
            <td>Value</td>
            <td>Value</td>
          </tr>
          <tr>
            <td>Value</td>
            <td>Value</td>
            <td>Value</td>
          </tr>
          <tr>
            <td>Value</td>
            <td>Value</td>
            <td>Value</td>
          </tr>
        </table>
      </mat-panel-description>
    </mat-expansion-panel-header>
  </mat-expansion-panel>
  <!-- ... -->
</mat-accordion>

Answer 2

如果接受，将 Ploppy 的回答标记为已回答。实现对齐的另一种方法是：

在你的组件或styles.css /scss中添加一个CSS规则

请注意，未来可能会弃用 ng-deep。

    ::ng-deep .mat-expansion-panel-header-description {
  position: absolute;
  left: 300px;
}

Answer 3

另一种解决方案：

<mat-accordion>
    <ng-container *ngFor="let r of data">
        <mat-expansion-panel>
            <mat-expansion-panel-header>
                <mat-panel-title>
                    {{ r.title }})
                </mat-panel-title>
                <mat-panel-description>
                    {{ r.info }}
                    <mat-slide-toggle>Toggle</mat-slide-toggle>
                </mat-panel-description>
            </mat-expansion-panel-header>
            <h1>Details</h1>
            <p>...</p>
        </mat-expansion-panel>
    </ng-container>
</mat-accordion>

和

.mat-expansion-panel-header-description {
    justify-content: space-between;
    align-items: center;
    max-width: 50%;
}

如何在垫面板中对齐多个描述

3 个答案: