[英]How to add two sidenav in page with Angular?
I am creating a page with Angular, using Angular-Material where I must place two sidenav, one on the left where some user data is shown and another on the right with a menu of options, an image of what I have so far:我正在使用 Angular-Material 创建一个页面,我必须在其中放置两个 sidenav,一个在左侧,显示一些用户数据,另一个在右侧,带有选项菜单,这是我目前拥有的图像:
The part of the white box is where the user data would go and to the right is where I want the options menu to be seen, which is the red box, although I already add the two sidenav the problem is that I cannot see the one on the right and that when pressing the button it expands to the left as in this example:白框的部分是用户数据所在的位置,右侧是我希望看到选项菜单的位置,即红色框,虽然我已经添加了两个 sidenav 问题是我看不到一个在右侧,当按下按钮时,它会向左展开,如下例所示:
https://stackblitz.com/edit/angular-bqgztk?file=src%2Fapp%2Fminivariant.component.html https://stackblitz.com/edit/angular-bqgztk?file=src%2Fapp%2Fminivariant.component.html
Although in this example the options menu handles it from the left, here is the code I'm working on:虽然在这个例子中选项菜单从左边处理它,但这是我正在处理的代码:
home.component.html主页.component.html
<mat-sidenav-container fullscreen>
<mat-sidenav mode="side" #sidenav opened position="start">
<mat-toolbar color="primary" class="mat-elevation-z4">
</mat-toolbar>
</mat-sidenav>
<mat-sidenav-content style="z-index: unset;overflow: hidden;">
<mat-toolbar>
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
<span class="toolbar-spacer"></span>
<label class="label">2719872</label>
<mat-icon class="menu" (click)="isExpanded = !isExpanded">menu</mat-icon>
</mat-toolbar>
<mat-sidenav-container class="example-sidenav-container" autosize>
<mat-sidenav #sidenav2 position="end" class="example-sidenav" mode="side" opened="true">
<mat-nav-list class="dashboard">
<a mat-list-item (click)="toggleActive($event)">
<mat-icon mat-list-icon>description</mat-icon>
<p matLine *ngIf="isExpanded">Documentación</p>
</a>
<a mat-list-item (click)="toggleActive($event)">
<mat-icon mat-list-icon>video_label</mat-icon>
<p matLine *ngIf="isExpanded">Tutoriales</p>
</a>
<a mat-list-item (click)="toggleActive($event)">
<mat-icon mat-list-icon>contact_support</mat-icon>
<p matLine *ngIf="isExpanded">Contáctenos</p>
</a>
<a mat-list-item (click)="toggleActive($event)">
<mat-icon mat-list-icon>logout</mat-icon>
<p matLine *ngIf="isExpanded">Salir</p>
</a>
</mat-nav-list>
</mat-sidenav>
</mat-sidenav-container>
<div class="main-content">
<p>
Hi
</p>
</div>
<router-outlet></router-outlet>
</mat-sidenav-content>
The structure in not right.结构不对。 You should have one
container
and then use position
attribute to align them.你应该有一个
container
,然后使用position
属性来对齐它们。
<mat-sidenav-container class="example-container">
<mat-sidenav opened mode="side" opened="true">Start content</mat-sidenav>
<mat-sidenav opened mode="side" position="end" opened="true">End content</mat-sidenav>
Main content
</mat-sidenav-container>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.