如何放置“mat-toolbar"在“mat-sidenav"之上角材料 5 [英] How to place "mat-toolbar" on top of "mat-sidenav" Angular Material 5
问题描述
我写在这里是因为我有一个关于 Angular Material 的 Mat Toolbar 和 Mat-sidenav 的问题.我试图让 Sidenav 进入工具栏下方,而工具栏总是占据顶部,如下所示:
这是我的代码:
<mat-sidenav #drawer class="sidenav" fixedInViewport="true"[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"[mode]="(isHandset$ | async) ? 'side' : 'push'"[打开]="(isHandset$ | async)"><mat-toolbar class="fixed-header"><img class="logooTest" src="data:image/gif;base64,test"/></mat-toolbar><mat-nav-list><mat-list-item><a routerLink="/dashboard">测试</a><mat-icon mat-list-icon>home</mat-icon></mat-list-item><mat-list-item><a routerLink="/dashboard">测试</a><mat-icon mat-list-icon>home</mat-icon></mat-list-item><mat-list-item><a routerLink="/test">Test</a><mat-icon mat-list-icon>tune</mat-icon></mat-list-item><mat-list-item><a routerLink="/#">测试</a><mat-icon mat-list-icon>设置</mat-icon></mat-list-item><mat-list-item><a routerLink="/#">测试</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">测试下拉菜单</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="/#">测试</a></mat-list-item><mat-list-item><a routerLink="/#">测试</a></mat-list-item><h2 matSubheader><mat-icon>account_balance</mat-icon>测试 </h2><mat-list-item (click)="showSubSubMenu = !showSubSubMenu" class="parent"><span class="full-width" *ngIf="isExpanded || isShowing">测试</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="/test">Test</a></mat-list-item><mat-list-item><a routerLink="/#">测试</a></mat-list-item><h2 matSubheader><mat-icon>card_travel</mat-icon>测试 </h2><mat-list-item><a routerLink="/#">测试</a></mat-list-item><mat-list-item><a routerLink="/#">测试</a></mat-list-item>
</mat-nav-list></mat-sidenav><mat-sidenav-content><mat-toolbar color="primary" class="mat-elevation-z5"><按钮类型=按钮"咏叹调标签=切换sidenav"垫图标按钮(click)="drawer.toggle()"><mat-icon aria-label="侧边导航切换图标">菜单</mat-icon>按钮><span class="spacer"></span><div class="导航"><a class="button" href=""><mat-icon class="logoutIcon">exit_to_app</mat-icon><div class="logout"><span class="aligned-with-icon">Salir</span></div></a>
</mat-toolbar></mat-sidenav-content></mat-sidenav-container>
我使用的是 5.6.0 版的 Angular 和 Angular Material.我尝试使用 CSS 并更改代码结构的顺序,但最后一个只是给了我错误和更多错误;阻止应用程序运行.
您在 mat-sidenav-content
中放入的任何内容都会出现在菜单的旁边.工具栏上方sidenav菜单和内容的基本布局结构是:
... <mat-sidenav-container>...</mat-sidenav-container>
这是一个关于 StackBlitz.
I'm writing here since I have a question about Mat Toolbar and Mat-sidenav from Angular Material. I'm trying to get the Sidenav to go under the toolbar and the toolbar always occupies the top part, something like this:
Here´s my code:
<mat-sidenav-container class="sidenav-container" autosize>
<mat-sidenav #drawer class="sidenav" fixedInViewport="true"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'side' : 'push'"
[opened]="(isHandset$ | async)">
<mat-toolbar class="fixed-header">
<img class="logooTest" src="data:image/gif;base64,test"/>
</mat-toolbar>
<mat-nav-list>
<mat-list-item>
<a routerLink="/dashboard">Test</a>
<mat-icon mat-list-icon>home</mat-icon>
</mat-list-item>
<mat-list-item>
<a routerLink="/dashboard">Test</a>
<mat-icon mat-list-icon>home</mat-icon>
</mat-list-item>
<mat-list-item>
<a routerLink="/test">Test</a>
<mat-icon mat-list-icon>tune</mat-icon>
</mat-list-item>
<mat-list-item>
<a routerLink="/#">Test</a>
<mat-icon mat-list-icon>settings</mat-icon>
</mat-list-item>
<mat-list-item>
<a routerLink="/#">Test</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">Test 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="/#">Test</a>
</mat-list-item>
<mat-list-item>
<a routerLink="/#">Test</a>
</mat-list-item>
<h2 matSubheader><mat-icon>account_balance</mat-icon> Test</h2>
<mat-list-item (click)="showSubSubMenu = !showSubSubMenu" class="parent">
<span class="full-width" *ngIf="isExpanded || isShowing">Test</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="/test">Test</a>
</mat-list-item>
<mat-list-item>
<a routerLink="/#">Test</a>
</mat-list-item>
<h2 matSubheader><mat-icon>card_travel</mat-icon> Test</h2>
<mat-list-item>
<a routerLink="/#">Test</a>
</mat-list-item>
<mat-list-item>
<a routerLink="/#">Test</a>
</mat-list-item>
</div>
</div>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary" class="mat-elevation-z5">
<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>
<div class="navigation">
<a class="button" href="">
<mat-icon class="logoutIcon">exit_to_app</mat-icon>
<div class="logout"><span class="aligned-with-icon">Salir</span></div>
</a>
</div>
</mat-toolbar>
</mat-sidenav-content>
</mat-sidenav-container>
I'm using the version 5.6.0 of Angular and Angular Material. I tried using CSS and also changing the order of the structure of the code, but this last one simply gave me errors and more errors; preventing the application from running.
Anything you put inside mat-sidenav-content
appears beside the menu. The basic layout structure for toolbar above sidenav menu and content is:
<mat-toolbar>...</mat-toolbar>
<mat-sidenav-container>...</mat-sidenav-container>
Here's an example on StackBlitz.
这篇关于如何放置“mat-toolbar"在“mat-sidenav"之上角材料 5的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!