时间戳

首页 > 解决方案 > 出现 Sidenav 栏菜单时应移动内容

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

问题描述

目标：
当您单击标题工具栏中的图标菜单时，应将其展开，并且<mat-sidenav-content>由于 sidenav 菜单的空间，应将“ ”的内容向右移动更多。

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

我错过了什么？

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

Stackblitz：
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);
}

标签： htmlcssangulartypescriptangular9

解决方案

演示使打开的属性 isExpanded

[opened]="isExpanded"

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

可能的解决方案

使内容的位置relative和删除margin-left属性都处于真实状态opened 

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

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

推荐阅读