时间戳

首页 > 解决方案 > Angular 材质 sidenav 和扩展插入填充到左侧，为什么？

angular - Angular 材质 sidenav 和扩展插入填充到左侧，为什么？

问题描述

我尝试制作最简单的可折叠左侧导航栏，
但它不会粘在左侧，而是被填充
，因此它最终位于页面中间。

没有CSS。
填充量取决于单词“Overview”的长度。

<mat-sidenav-container>
  <mat-sidenav mode="side" opened>
    <mat-sidenav-content>
      <mat-expansion-panel>

        <mat-expansion-panel-header>
          <mat-panel-title>
            Overview
          </mat-panel-title>
        </mat-expansion-panel-header>
      </mat-expansion-panel>

    </mat-sidenav-content>

  </mat-sidenav>

  <mat-sidenav-content>
      <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

标签： angularangular-materialmat-sidenav

解决方案

有<mat-sidenav-content>很多，即第一个。

正确的代码应该是：

<mat-sidenav-container>
  <mat-sidenav mode="side" opened>
    <mat-expansion-panel>

      <mat-expansion-panel-header>
        <mat-panel-title>
          Overview
        </mat-panel-title>
      </mat-expansion-panel-header>

    </mat-expansion-panel>

  </mat-sidenav>

  <mat-sidenav-content>
      <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

推荐阅读