Мой sidenav не подталкивает контент, он его преодолевает

Я пытаюсь заставить Side Material Sidenav подталкивать контент, когда я открываю панель и, очевидно, когда она закрывается; элементы, которые были возвращены на место. В настоящее время то, что он делает, открыто над контентом

См. изображение

Вот мой app-header.component.html

<!--- Toolbar starts here-->
<div class="container-toolbar">
    <mat-toolbar color="primary" class="fixed-header">
        <img src="" />
        <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()">
            <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
        </button>
        <span class="spacer"></span>
        <button type="button" mat-icon-button href="">
            <mat-icon matTooltip="Salir">exit_to_app</mat-icon>
        </button>
    </mat-toolbar>
</div>

<!--- Sidenav starts here -->
<mat-sidenav-container style="height:100%;width:100%;">
    <mat-sidenav #drawer fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'side' : 'push'"
        [opened]="(isHandset$ | async)" style="box-shadow: 0 5px 5px #999;z-index: 1;">
        <mat-nav-list>
            <mat-list-item>
                <a routerLink="/dashboard">Home</a>
                <mat-icon mat-list-icon>home</mat-icon>
            </mat-list-item>
            <mat-list-item>
                <a routerLink="/parametros">Section 2</a>
                <mat-icon mat-list-icon>tune</mat-icon>
            </mat-list-item>
            <mat-list-item>
                <a routerLink="/#">Section 3</a>
                <mat-icon mat-list-icon>settings</mat-icon>
            </mat-list-item>
            <mat-list-item>
                <a routerLink="/#">Section 4</a>
                <mat-icon mat-list-icon>layers</mat-icon>
            </mat-list-item>
            <mat-list-item (click)="showSubmenu = !showSubmenu" class="parent">
                <span class="full-width" *ngIf="isExpanded || isShowing">Dropdown</span>
                <mat-icon mat-list-icon>flash_on</mat-icon>
                <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">
                <mat-list-item>
                    <a routerLink="/#">Section Dropdown 1</a>
                </mat-list-item>
                <mat-list-item>
                    <a routerLink="/#">Section Dropdown 2</a>
                </mat-list-item>
                <h2 matSubheader class="mat-submenu-title">
                    <mat-icon>account_balance</mat-icon>Title Dropdown
                </h2>
                <mat-list-item (click)="showSubSubMenu = !showSubSubMenu" class="parent">
                    <span class="full-width" *ngIf="isExpanded || isShowing">Dropdown 2 (inside)</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>
                        <a routerLink="/topupcard">Dropdown section</a>
                    </mat-list-item>
                    <mat-list-item>
                        <a routerLink="/#">Dropdown section</a>
                    </mat-list-item>
                    <h2 matSubheader class="mat-submenu-title">
                        <mat-icon>card_travel</mat-icon> Title
                    </h2>
                    <mat-list-item>
                        <a routerLink="/#">Dropdown 2</a>
                    </mat-list-item>
                    <mat-list-item>
                        <a routerLink="/#">Dropdown 2</a>
                    </mat-list-item>
                </div>
            </div>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content></mat-sidenav-content>
</mat-sidenav-container>

Мое приложение-header.component.ts

import { Component, ViewChild } from '@angular/core';
import { Http, Response, RequestOptions, Headers } from '@angular/http';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { map } from 'rxjs/operators';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

import { User } from '../../resources/user.resource';
import { UserService } from '../../services/user.service';
import { MatSidenav } from '@angular/material/sidenav';

@Component({
    selector: 'app-header',
    templateUrl: './app-header.component.html',
    styleUrls: ['./app-header.component.css']
})
export class AppHeader {
    isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
        .pipe(map(result => result.matches));

    constructor(private breakpointObserver: BreakpointObserver) { }

    @ViewChild('sidenav') sidenav: MatSidenav;
    isExpanded = true;
    showSubmenu = false;
    isShowing = false;
    showSubSubMenu = false;

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

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

Мой app.component.html

<app-header></app-header>
<div class="app-body">
    <main class="main">
        <div class="container-fluid">
            <router-outlet></router-outlet>
            <ngx-loading [show]="loading"></ngx-loading>
        </div>
    </main>
</div>

S. A 13.12.2018 источник

comment

Это то, что вы ищете: stackblitz.com/edit/angular-b4gmby? Я сделал это для обсуждения в этой теме на github: github.com/angular/material2/issues/ 1728 - Mel 13.12.2018

comment

@Mel Да, это то, что я ищу. Дело в том, что мой контент отдельный, они находятся в пути components / views / componentname, и поэтому они не загружаются там, где находится sidenav, но они загружаются в app.component.html с тегом ‹router-outlet› ‹ / router-outlet ›(Выше вы можете увидеть код моего app.component.html) Попробуйте поместить стили, которые вы мне сказали, на router-outlet, но это не сработало. Спасибо за ответы. - S. A 13.12.2018

comment

@Veben Я только что попробовал, но ничего не вышло. - S. A 13.12.2018

Ответы (3)

arrow_upward
3
arrow_downward

Вы можете использовать autosize на mat-sidenav-container

Шаблон

<mat-sidenav-container autosize>
  <mat-sidenav #sidenav class="example-sidenav" mode="side" opened="true">

    <mat-nav-list>
      <mat-list-item>
        <button mat-icon-button (click)="isExpanded = !isExpanded">
          <mat-icon *ngIf="!isExpanded">chevron_right</mat-icon>
          <mat-icon *ngIf="isExpanded">chevron_left</mat-icon>
        </button>
      </mat-list-item>
      <mat-list-item>
       <mat-icon mat-list-icon>home</mat-icon>
         <p matLine *ngIf="isExpanded">Home</p>
      </mat-list-item>
    </mat-nav-list>
  </mat-sidenav>

  <div class="example-sidenav-content">
    Main content that resizes properly
  </div>

</mat-sidenav-container>

Составная часть

@Component({
  selector: 'sidenav-autosize-example',
  templateUrl: 'sidenav-autosize-example.html',
  styleUrls: ['sidenav-autosize-example.css'],
})
export class SidenavAutosizeExample {
  isExpanded = false;
}

Посмотреть на stackblitz

Mel 13.12.2018

comment

Да, это то, что я ищу. Дело в том, что мой контент отдельный, они находятся в пути components / views / componentname, и поэтому они не загружаются там, где находится sidenav, но они загружаются в app.component.html с тегом ‹router-outlet› ‹ / router-outlet ›(Выше вы можете увидеть код моего app.component.html) Попробуйте поместить стили, которые вы мне сказали, на router-outlet, но это не сработало. Спасибо за ответы - S. A; 13.12.2018

arrow_upward
0
arrow_downward

Вам не нужно [] для параметров. Заменять:

[mode]="(isHandset$ | async) ? 'side' : 'push'"

by:

mode="side"

Возможно, вам придется добавить класс autosize на свой mat-sidenav-container, например:

<mat-sidenav-container autosize>

veben 13.12.2018

arrow_upward
0
arrow_downward

Исправлено: просто нужно добавить

<router-outlet></router-outlet>

Внутри тега <mat-sidenav-content></mat-sidenav-content> в файле app-header.component.html. Всем спасибо за ответы!

S. A 13.12.2018

Мой sidenav не подталкивает контент, он его преодолевает

Ответы (3)

Вопросы по теме