Angular 材质 sidenav 和扩展插入填充到左侧，为啥？

Posted 2023-02-18

【中文标题】Angular 材质 sidenav 和扩展插入填充到左侧，为啥？

【英文标题】：Angular material sidenav and expansion insert padding to the left, why?Angular 材质 sidenav 和扩展插入填充到左侧，为什么？

【发布时间】：2020-05-21 11:01:18

【问题描述】：

我尝试制作最简单的可折叠左侧导航栏， 但它不会粘在左边，而是被填充了 所以它最终会出现在页面中间。

没有 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>

【参考方案1】：

很多人都有<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>