可折叠的 mat-sidenav 菜单调整内容大小不起作用
Collapsable mat-sidenav menu rezise content not working
我正在制作一个 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
我建议带有图标的栏位于 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
您的应用-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>
您的应用-component.scss
.app-sidenav {
width: 100vw;
height: 100vh;
}
您的应用-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.
}
我之前在我的一个应用程序中解决过类似的问题。我使用 ngClass
和一个控制 mat-sidenav
宽度 属性 和 mat-sidenav-content
margin-left
属性 的布尔值。这是一个 stackblitz,我从那个应用程序中切出了相关部分。
我正在制作一个 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
我建议带有图标的栏位于 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
您的应用-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>
您的应用-component.scss
.app-sidenav {
width: 100vw;
height: 100vh;
}
您的应用-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.
}
我之前在我的一个应用程序中解决过类似的问题。我使用 ngClass
和一个控制 mat-sidenav
宽度 属性 和 mat-sidenav-content
margin-left
属性 的布尔值。这是一个 stackblitz,我从那个应用程序中切出了相关部分。