当 Sidenav 栏菜单出现时应移动内容

Question

目标：
当您单击 header 工具栏中的图标菜单时，由于 sidenav 菜单的 space，它应该展开并且“<mat-sidenav-content>”的内容应该向右移动更多.

问题：
当单击图标菜单时，由于sidenavemenu 的扩展space，“<mat-sidenav-content>”的内容不会向右侧移动。展开侧导航栏菜单时，内容是静态的。

我遗漏了什么部分？

信息：
*使用 angular 9
*显示侧边栏导航菜单时将移动的内容示例。
(https://stackblitz.com/angular/qoaqpenxjqy)
*当菜单未展开时，应显示图标而不是文本。

堆栈闪电战：
https://stackblitz.com/edit/angular-ymkpvj-hso3tw

谢谢！

<mat-toolbar color="primary" class="example-toolbar">
    <button mat-icon-button (click)="isExpanded = !isExpanded" >
    <mat-icon>menu</mat-icon>
  </button>
    <h1 class="example-app-name">Nested Menus</h1>
</mat-toolbar>

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

    <mat-sidenav #sidenav class="example-sidenav" 
    mode="side" 
    opened="true" 
    (mouseenter)="mouseenter()" 
    (mouseleave)="mouseleave()"
  >

        <mat-nav-list>
            <mat-list-item (click)="showSubmenu = !showSubmenu" class="parent">
                <mat-icon mat-list-icon>home</mat-icon>
                <span class="full-width" *ngIf="isExpanded || isShowing">Parent Menu</span>
                <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubmenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon>
            </mat-list-item>
            <div class="submenu" [ngClass]="{'expanded' : showSubmenu}" *ngIf="isShowing || isExpanded">
                <a mat-list-item href="...">Submenu Item 1</a>
                <a mat-list-item href="...">Submenu Item 2</a>
                <mat-list-item (click)="showSubSubMenu = !showSubSubMenu" class="parent">
                    <span class="full-width" *ngIf="isExpanded || isShowing">Nested Menu</span>
                    <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubSubMenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon>
                </mat-list-item>
                <div class="submenu" [ngClass]="{'expanded' : showSubSubMenu}" *ngIf="isShowing || isExpanded">
                    <mat-list-item>SubSubmenu Item 1</mat-list-item>
                    <mat-list-item>SubSubmenu Item 2</mat-list-item>
                </div>
            </div>
        </mat-nav-list>
    <mat-nav-list>
    </mat-nav-list>

    </mat-sidenav>

  <mat-sidenav-content>
    test test test test test test test
  </mat-sidenav-content>

</mat-sidenav-container>



<!-- Copyright 2017 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license -->

import {Component, ViewChild} from '@angular/core';
import {FormBuilder, FormGroup} from '@angular/forms';

/** @title Fixed sidenav */
@Component({
  selector: 'sidenav-fixed-example',
  templateUrl: 'sidenav-fixed-example.html',
  styleUrls: ['sidenav-fixed-example.css'],
})
export class SidenavFixedExample {

  /** 
  options: FormGroup;

  constructor(fb: FormBuilder) {
    this.options = fb.group({
      bottom: 0,
      fixed: false,
      top: 0
    });
  }
*/

constructor() {}

  events: string[] = [];



  isExpanded = true;
  showSubmenu: boolean = false;
  isShowing = false;
  showSubSubMenu: boolean = false;

  mouseenter() {
    if (!this.isExpanded) {
      this.isShowing = true;
    }
  }

  mouseleave() {
    if (!this.isExpanded) {
      this.isShowing = false;
    }
  }

}

.example-container {
  height: 500px;
  border: 1px solid rgba(0, 0, 0, 0.5);
}
.example-sidenav-content {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.example-sidenav {
   user-select: none;
}
.full-width {
  width: 100%;
}
.menu-button {
  transition: 300ms ease-in-out;
  transform: rotate(0deg);
}
.menu-button.rotated {
  transform: rotate(180deg);
}
.submenu {
  overflow-y: hidden;
  transition: transform 300ms ease;
  transform: scaleY(0);
  transform-origin: top;
  padding-left: 30px;
}
.submenu.expanded {
  transform: scaleY(1);
}

Answer 1

Demo打开属性展开

[opened]="isExpanded"

但如果您想在关闭时显示小图标，则需要更改 css。因为导航位置是absolute，但是内容是relative。内容随 margin-left 属性变化为打开的属性值。

可能的解决方案

为 opened

的真实条件下的内容设置 relative 并删除 margin-left 属性

.mat-sidenav{
  position: relative !important;
  height: 100%;
  overflow: auto;
  float: left;
}
.mat-drawer-content {
   margin-left: 0 !important;
}

你应该把它们放在 style.css 里面。 Demo

当 Sidenav 栏菜单出现时应移动内容

The Content should be Moved When the Sidenav bar Menu Appear

html

css

typescript

angular

angular9