时间戳

首页 > 解决方案 > 无主体的垫子扩展板

angular - 无主体的垫子扩展板

问题描述

Angular 6 ...我有一个手风琴组合多个垫子扩展面板。

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

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

我已经排除了使用 *ngIf 写出任何面板内容（因此在标题之后没有导航列表元素），但是仍然插入了一个正文并单击标题，打开了一个大约 10 像素的空正文。

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

谢谢

标签： angularangular-material

解决方案

您可能不应该将扩展面板用作菜单，因为它们并非设计为以这种方式工作 - 正如您所经历的那样。

除了禁用扩展面板之外，您无法有效地关闭扩展，但这也会使标题看起来也被禁用。如果您强制您的标题内容看起来不被禁用，那么您可以使用：

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

推荐阅读