可折叠的 mat-sidenav 菜单调整内容大小不起作用

Posted 2023-02-18

【中文标题】可折叠的 mat-sidenav 菜单调整内容大小不起作用

【英文标题】：Collapsable mat-sidenav menu rezise content not working

【发布时间】：2020-08-09 05:46:47

【问题描述】：

我正在制作一个 Angular 9 应用，我想在我的项目中添加一个 sidenav。

我想要的sidenav就是这个Primer Angular Template --> Primer - Angular 8+ Material

这就是我想要的

这就是我用我的 scss 和 html 得到的。问题是侧边栏折叠时内容没有调整大小，然后样式被破坏。为此，我正在寻找mat-sidenav-container 和mat-sidenav 的答案

HTML

<mat-sidenav-container  class="app example-sidenav-container" autosize>
  <mat-sidenav #sidenav class="example-sidenav" mode="side" opened="true" [ngStyle]=" 'width': !collapsedSidebar ? '250px':'70px' ">
    <button mat-icon-button (click)="collapsedSidebar = !collapsedSidebar">
      <mat-icon>menu</mat-icon>
   </button>
  </mat-sidenav>

  <div fxFlex  class="example-sidenav-content">
    <router-outlet></router-outlet>
  </div>
</mat-sidenav-container>

SCSS

.app  height: 100vh; 
.example-container 
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

.example-sidenav-container  flex: 1; 
.example-sidenav
  -webkit-transition: width .4s;
  transition: width .4s;

.mat-drawer background:White; 
.example-sidenav-content 
  display: flex;
  height: 100%;
  background-color: #e8ded7;
  opacity: 0.9;

.example-fill-remaining-space  flex: 1 1 auto; 

请帮忙

更新 这是一个 Stackblitz 示例 --> https://stackblitz.com/edit/angular-xa3n5i

【问题讨论】：

你能添加一个stackblits例子吗

@AymenTAGHLISSIA 我刚刚添加了stackblitz示例stackblitz.com/edit/angular-xa3n5i

【参考方案1】：

我之前在我的一个应用中解决了类似的问题。我使用 ngClass 和一个布尔值来控制 mat-sidenav 宽度属性和 mat-sidenav-content margin-left 属性。这是一个堆栈闪电战，我从该应用程序中删除了相关部分。

https://stackblitz.com/edit/angular-mff93r

【讨论】：

非常感谢，这正是我要找的

【参考方案2】：

你的 app-component.html

<mat-sidenav-container class="app-container">

  <mat-sidenav #sidenav             
              [mode]="mode"
              [opened]="opened">

    <button (click)="toggleSideNav()">toggle</button>

  </mat-sidenav>

  <router-outlet class="container"></router-outlet>

</mat-sidenav-container>

你的 app-component.scss

.app-sidenav 
  width: 100vw;
  height: 100vh;

你的 app-component.ts

import Component, OnInit from '@angular/core';
import MediaChange, MediaObserver from "@angular/flex-layout";

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
)
export class AppComponent implements OnInit 

  mode: string;
  opened = true;

  constructor(private mediaObserver: MediaObserver) 
  

  ngOnInit(): void 

    this.mediaObserver.asObservable().subscribe((change: MediaChange[]) => 

      const isMobileView = change[0].mqAlias === 'xs' || change[0].mqAlias === 'sm';
      this.mode = isMobileView ? 'over' : 'side';

    );

    // track auth state, something like this.
    // this.opened = hasLoggedIn && (!isMobileView);

  

  // other code.

【参考方案3】：

我建议带有图标的栏位于 sidenav 之外，但与菜单项及其相关图标对齐。

然后您可以使用本机功能来切换 sidenav 可见性。

<div class="app">
    <button mat-icon-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
   </button>
    <div style="display: grid; grid-template-columns: 48px auto;height: 100%;">
        <div class="icons">
            <div class="icon">Icon</div>
            <div class="icon">Icon</div>
        </div>
        <mat-sidenav-container autosize>
            <mat-sidenav #sidenav mode="side" opened="true">
                <div class="item">Item 1 text</div>
                <div class="item">Item 2 text</div>
            </mat-sidenav>

            <div fxFlex class="example-sidenav-content">
                a verss
            </div>
        </mat-sidenav-container>
    </div>
<div>

查看 stackblitz 示例：https://angular-cymk69.stackblitz.io

【讨论】：

谢谢，这将是一个有效的解决方案，不幸的是当屏幕很小时它不适应，另外，我有一个带有手风琴模式的模块和子模块的菜单，如果图标位于单独的 div 中

我明白你的意思，尽管这可以使用将图标与其项目对齐的指令来解决。