Question

有没有办法在角度材料扩展面板内容打开时设置最小高度？我已经看到了许多为标题设置 expandHeight 和 collapsedHeight 的示例，但没有为内容设置。在此处的 Angular 文档中有对 MatExpansionPanelContent 的引用：https://material.angular.io/components/expansion/api#MatExpansionPanelContent 但我没有看到任何可用于设置最小高度的属性。

我有一个侧面导航出现在带有垫子手风琴的组件顶部，并且侧面导航被压扁到手风琴内的扩展面板的大小。我的 html 设置如下：

<div class="mtTool" fxLayout="row" fxLayout.sm="column">
<div fxFlex="65" >
    <mat-sidenav-container>
        <mat-sidenav #sidenav mode="over" closed>
            <app-mt-mark-form [mtp]="mtp" ></app-mt-mark-form>
        </mat-sidenav>
        <mat-sidenav-content>
            <app-mt-ticket-list></app-mt-ticket-list>/* this has the mat accordion
        </mat-sidenav-content>
    </mat-sidenav-container>
</div>
<div fxFlex="35">
    <app-mt-map></app-mt-map>
</div>

谢谢

皮特

Answer 1

我在内容周围包裹了一个 div 并在 css 中设置了一个最小高度。好像没问题

<mat-expansion-panel>
<mat-expansion-panel-header>
    <mat-panel-description>
       <h2>HEADER</h2> 
      </mat-panel-description>
</mat-expansion-panel-header>
<div class="ticketContent">
...content here
</div>

css

.markTicketContent{
min-height: 70vh;

}

设置角度材料扩展面板内容的最小高度

1 个答案: