[英]How to push mat-list-items to the bottom without using absolute position in Angular Material?
I have just started using Angular Material and I wanted to implement the sidenav to have items that are at the bottom of the page.我刚刚开始使用 Angular Material,我想实现 sidenav 来让项目位于页面底部。 For now I am able to accomplish it with css.
现在我可以用 css 来完成它。
position: absolute;
left: 0;
bottom: 0;
Is there any way to put spaces between items?有没有办法在项目之间放置空格? My issue comes when I resize the page, the bottom items overlap with the items which are above.
当我调整页面大小时,我的问题出现了,底部项目与上面的项目重叠。
I've included screenshots and the code below.我已经包含了屏幕截图和下面的代码。 Thanks.
谢谢。
<mat-sidenav-container class="h-screen w-screen">
<mat-sidenav #sidenav class="shadow border-0" fixedInViewport mode="side" opened>
<mat-toolbar>
<button mat-mini-fab color="warn" (click)="navigation.toggle()">
<mat-icon inline=true fontSet="fa" fontIcon="fa-fire" aria-label="SLMC Logo"></mat-icon>
</button>
</mat-toolbar>
<mat-nav-list>
<a mat-list-item>
<button mat-icon-button>
<mat-icon inline=true fontSet="fa" fontIcon="fa-users-cog" aria-label="Administrator"></mat-icon>
</button>
</a>
<a mat-list-item>
<button mat-icon-button>
<mat-icon inline=true fontSet="fa" fontIcon="fa-tachometer-alt" aria-label="Services"></mat-icon>
</button>
</a>
<a mat-list-item>
<button mat-icon-button>
<mat-icon inline=true fontSet="fa" fontIcon="fa-chart-bar" aria-label="Analytics"></mat-icon>
</button>
</a>
<a mat-list-item>
<button mat-icon-button>
<mat-icon inline=true fontSet="fa" fontIcon="fa-plus" aria-label="Compose"></mat-icon>
</button>
</a>
<!-- This is where the bottom items reside.-->
<div class="absolute bottom-0 left-0">
<a mat-list-item>
<button mat-icon-button>
<mat-icon inline=true fontSet="fa" fontIcon="fa-bell" aria-label="Notifications"></mat-icon>
</button>
</a>
<a mat-list-item>
<button mat-icon-button>
<mat-icon inline=true fontSet="fa" fontIcon="fa-user" aria-label="User Account"></mat-icon>
</button>
</a>
<a mat-list-item>
<button mat-icon-button>
<mat-icon inline=true fontSet="fa" fontIcon="fa-cog" aria-label="Settings"></mat-icon>
</button>
</a>
</div>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-sidenav-container>
<mat-sidenav #navigation class="shadow border-0" fixedInViewport mode="side" opened>
<app-navigation (toggleNavigation)="navigation.toggle()"></app-navigation>
</mat-sidenav>
<mat-sidenav-content class="page-wrap">
<app-header></app-header>
<main class="flex-1">
<router-outlet></router-outlet>
</main>
<app-footer></app-footer>
</mat-sidenav-content>
</mat-sidenav-container>
</mat-sidenav-content>
Very interesting and logical question... getting the bottom 3 icons to stick to the bottom requires position:absolute
, which causes the over-riding effect (which is exactly the effect which is expected with absolute positioning).非常有趣和合乎逻辑的问题......让底部 3 个图标粘在底部需要
position:absolute
,这会导致覆盖效果(这正是绝对定位预期的效果)。
To get our ideal scenario, we gotta toggle the position:relative
between position:absolute
based on the breakpoint where the over-riding starts to take effect.为了获得理想的场景,我们必须根据覆盖开始生效的断点在
position:absolute
之间切换position:relative
。 This is where we needed JavaScript/TypeScript as CSS can't do this alone...这就是我们需要 JavaScript/TypeScript 的地方,因为 CSS 无法单独做到这一点......
You can check complete working stackblitz here您可以在此处查看完整的工作堆栈闪电战
this is the relevant TS file:这是相关的TS文件:
import {Component} from '@angular/core';
import {HostListener} from '@angular/core';
/** @title Sidenav open & close behavior */
@Component({
selector: 'sidenav-open-close-example',
templateUrl: 'sidenav-open-close-example.html',
styleUrls: ['sidenav-open-close-example.css'],
})
export class SidenavOpenCloseExample {
events: string[] = [];
opened: boolean;
appropriateClass:string = '';
@HostListener('window:resize', ['$event'])
getScreenHeight(event?){
//console.log(window.innerHeight);
if(window.innerHeight<=412){
this.appropriateClass = 'bottomRelative';
}else{
this.appropriateClass = 'bottomStick';
}
}
constructor(){
this.getScreenHeight();
}
shouldRun = [/(^|\.)plnkr\.co$/, /(^|\.)stackblitz\.io$/].some(h => h.test(window.location.host));
}
note the ngClass in the relevant HTML below:请注意以下相关HTML中的ngClass :
<mat-nav-list>
<div class="">
<a mat-list-item>
<button mat-icon-button>
<mat-icon inline=true fontSet="fa" fontIcon="fa-users-cog" aria-label="Administrator"></mat-icon>
</button>
</a>
<a mat-list-item>
<button mat-icon-button>
<mat-icon inline=true fontSet="fa" fontIcon="fa-tachometer-alt" aria-label="Services"></mat-icon>
</button>
</a>
<a mat-list-item>
<button mat-icon-button>
<mat-icon inline=true fontSet="fa" fontIcon="fa-chart-bar" aria-label="Analytics"></mat-icon>
</button>
</a>
<a mat-list-item>
<button mat-icon-button>
<mat-icon inline=true fontSet="fa" fontIcon="fa-plus" aria-label="Compose"></mat-icon>
</button>
</a>
</div>
<!-- This is where the bottom items reside.-->
<div [ngClass]='appropriateClass'>
<a mat-list-item>
<button mat-icon-button>
<mat-icon inline=true fontSet="fa" fontIcon="fa-bell" aria-label="Notifications"></mat-icon>
</button>
</a>
<a mat-list-item>
<button mat-icon-button>
<mat-icon inline=true fontSet="fa" fontIcon="fa-user" aria-label="User Account"></mat-icon>
</button>
</a>
<a mat-list-item>
<button mat-icon-button>
<mat-icon inline=true fontSet="fa" fontIcon="fa-cog" aria-label="Settings"></mat-icon>
</button>
</a>
</div>
</mat-nav-list>
relevant CSS :相关CSS :
button {border:1px solid red}
.bottomStick{/*border-top:1px solid green;border-bottom:1px solid green;*/position:absolute; bottom:0}
.bottomRelative{position:relative;}
I use flex-layout and manage to add an empty element between items.我使用 flex-layout 并设法在项目之间添加一个空元素。 There is no CSS added.
没有添加 CSS。 The container needs to have 100% height and in my case, I have to add FxFill, you can manage the way you like.
容器需要有 100% 的高度,在我的情况下,我必须添加 FxFill,您可以按照自己喜欢的方式管理。
// sidenav-componet // 侧导航组件
<div fxLayout="column" fxFill>
<mat-toolbar color="primary" class="mat-elevation-z5">
<h2 >Menu</h2>
</mat-toolbar>
<mat-list fxLayout="column" fxFlex>
<mat-list-item fxLayoutAlign="center center" >
<h4 routerLink="/">Home</h4>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item fxLayoutAlign="center center" >
<h4 routerLink="/admin">Admin</h4>
</mat-list-item>
<mat-divider></mat-divider>
<span fxFlex></span>
<mat-divider></mat-divider>
<mat-list-item fxLayoutAlign="center center" >
<h4 (click)="logout()">Logout</h4>
</mat-list-item>
<mat-divider></mat-divider>
</mat-list>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.