Question

Angular 6 ...我有一个可折叠多个面板扩展面板的手风琴。

面板代表菜单选项，展开后具有子菜单选项的导航列表。

某些菜单选项（例如，某些垫扩展面板）没有子菜单。可以通过单击标题自行选择它们，并且不应该打开任何内容。

我排除了使用* ngIf写出任何面板内容（因此标题后没有nav-list元素）的问题，但是仍然插入了一个主体，然后单击标题，打开了一个约10像素的空白主体

如何使面板标题可单击，但不显示任何正文内容？

谢谢

Answer 1

您可能不应该将扩展面板用作菜单，因为它们并非按照您的体验那样设计。

除非禁用扩展面板，否则您无法有效地关闭扩展，但这也会使页眉看起来也被禁用。如果您强制标题内容看起来没有被禁用，则可以使用：

<mat-expansion-panel disabled>

否则，您可以尝试以下技巧：

让扩展面板看起来很

<div class="mat-expansion-panel" style="height: 48px; border-radius: 0;">
  <div class="mat-expansion-panel-header" style="height: 48px;">
    <mat-panel-title>
      Title
    </mat-panel-title>
    <mat-panel-description>
      Description
    </mat-panel-description>
  </div>
</div>

强制扩展面板看起来像是未扩展（或不可扩展）：

<mat-expansion-panel class="no-body">
  <mat-expansion-panel-header class="no-body">
    <mat-panel-title>
      Title
    </mat-panel-title>
    <mat-panel-description>
      Description
    </mat-panel-description>
  </mat-expansion-panel-header>
</mat-expansion-panel>

.no-body {
  max-height: 48px;
}
.no-body.mat-expansion-panel-header >>> .mat-expansion-indicator {
  display: none;
}

无身体垫扩展面板

1 个答案: