[英]How to pin mat-toolbar and mat-sidenav and only have a scrollbar inside mat-sidenav-content?
[英]mat-toolbar not match width with mat-sidenav
學習角材料設計。 我創建了一個側面導航,並在其中放置了一個mat-toolbar,但是mat-tool bar並未占用其父side-nav的全部寬度,在其右側顯示了一些白線(這是其背景顏色家長)如何刪除白色背景
主nav.component.html
`<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport="true"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="!(isHandset$ | async)">
<mat-toolbar color="primary">Menu
</mat-toolbar>
<mat-nav-list>
<a mat-list-item href="#">Link 1</a>
<a mat-list-item href="#">Link 2</a>
<a mat-list-item href="#">Link 3</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span>printhouse</span>
</mat-toolbar>
<ng-content></ng-content>
</mat-sidenav-content>
</mat-sidenav-container>`
主nav.component.css
.sidenav-container {
height: 100%;
}
.sidenav {
width: 200px;
box-shadow: 2px 0 6px rgba(0,0,0,0.24);
}
.sidenav .mat-toolbar {
/* background: inherit; */
}
.mat-toolbar.mat-primary {
position:sticky;
top: 0;
z-index: 1;
}
如何刪除白色背景
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.