如何使用 angular material 的扩展面板打开多面板？

Question

我想使用扩展面板，结果我想打开多面板，就像这个例子： open example

这是我的代码：

<mat-accordion>
  <mat-expansion-panel hideToggle>
    <mat-expansion-panel-header>
      <mat-panel-title>
        This is the expansion title
      </mat-panel-title>
      <mat-panel-description>
        This is a summary of the content
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>This is the primary content of the panel.</p>
  </mat-expansion-panel>
  <mat-expansion-panel (opened)="panelOpenState = true"
                       (closed)="panelOpenState = false">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Self aware panel
      </mat-panel-title>
      <mat-panel-description>
        Currently I am {{panelOpenState ? 'open' : 'closed'}}
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>I'm visible because I am open</p>
  </mat-expansion-panel>
</mat-accordion>

Answer 1

请考虑以下内容stackblitz

在儿童扩展面板上添加 hideToggle disabled 有助于匹配链接的图片，使用了两个垫子手风琴，第二个具有multi 属性允许打开多个面板

<mat-accordion>
  <mat-expansion-panel class="parentPanel" [expanded]="true">
    <mat-expansion-panel-header class="parentPanel_header">
      <mat-panel-title> Group </mat-panel-title>
    </mat-expansion-panel-header>
    <mat-accordion multi>
      <mat-expansion-panel class="childPanel childPanelCount" [expanded]="true" hideToggle disabled>
        <p>Elements count {{elements.length}}</p>
      </mat-expansion-panel>
      <ng-container *ngFor="let i of elements">
        <mat-expansion-panel class="childPanel" [expanded]="true" hideToggle disabled>
          <p>Element</p>
        </mat-expansion-panel>
      </ng-container>
    </mat-accordion>
  </mat-expansion-panel>
</mat-accordion>

需要一些 css 才能实现匹配外观，尽管这不是 css 问题

mat-expansion-panel.parentPanel {
  box-shadow: none;
  background-color: transparent;
}
.parentPanel_header {
  background-color: white;
  border: 1px solid lightgray;
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
.childPanelCount{
  opacity: 50%;
}

.parentPanel mat-expansion-panel.childPanel {
  margin-top: 1em !important;
}

::ng-deep .childPanel div.mat-expansion-panel-body {
  padding-bottom: 0 !important;
}

如何使用 angular material 的扩展面板打开多面板？

How can I open multi-panel using Expansion panel of angular material?

html

panel

expansion

angular-material

angular