我使用Angular Material构建了一个sidenav,可以在单击菜单时隐藏导航文本。我按照https://material.angular.io/components/sidenav/overview在mat-sidenav-container上使用自动调整大小
但是sidenav仍会覆盖mat-sidenav-content部分,并且不会自动调整内容部分的大小
我使用“ @ angular / material”:“ ^ 8.0.2”
html
<mat-sidenav-container class="example-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>
<mat-sidenav-content>
Main content
</mat-sidenav-content>
</mat-sidenav-container>
ts文件
import {Component} from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
@Component({
selector: 'sidenav-autosize-example',
templateUrl: 'sidenav-autosize-example.html',
styleUrls: ['sidenav-autosize-example.css'],
})
export class SidenavAutosizeExample {
isExpanded = false;
}
css
.example-container {
width: 100%;
height: 300px;
border: 1px solid rgba(0, 0, 0, 0.5);
}
.example-sidenav-content {
padding: 10px;
height: 100%;
}