gpt4 book ai didi

html - 如果图像在 sidenav 中,则 Material Sidenav 会溢出内容

转载 作者:太空宇宙 更新时间:2023-11-04 06:20:23 25 4
gpt4 key购买 nike

早上好!

我在我的 Angular 应用中使用 Material Design 侧边导航来为用户提供页面选择。侧面导航首先包含 Logo ,然后是用户可以选择的所有页面 - 如果他已登录。

问题:如果用户没有登录,则logo是宽度最大的元素;这混淆了页面内容的定位。页面内容被 sidenav 溢出,因为页面内容与页面链接对齐但未与 Logo 对齐。

The sidenav respects the width of the logo. The content does not

如您所见,sidenav 尊重 Logo 的宽度。内容没有。

HTML:

<mat-card>
<mat-sidenav-container>
<mat-sidenav #drawer mode="side" opened role="navigation">
<mat-nav-list>
<div class="logo-nav">
<img src="./assets/MyLogo.png">
</div>
<a id="nav-home" mat-list-item routerLink='home' routerLinkActive="active">Home</a>
<a id="nav-schulauswahl" mat-list-item routerLink='page1' routerLinkActive="active" *ngIf="loggedIn">
Page 1
</a>
<a id="nav-schule-list" mat-list-item routerLink='page2' routerLinkActive="active" *ngIf="loggedIn">
Page 2 with very long name
</a>
<a id="nav-logout" mat-list-item (click)='logout()' routerLinkActive="active">Logout</a>
</mat-nav-list>
</mat-sidenav>

<mat-sidenav-content>
Some Content
</mat-sidenav-content>
</mat-sidenav-container>
</mat-card>

typescript :

import { Component } from '@angular/core';

@Component({
selector: 'my-sidenav',
templateUrl: './sidenav.component.html',
styleUrls: ['./sidenav.component.scss']
})
export class SidenavComponent {

get loggedIn(): boolean {
return true; // <- Toogle this to see all page links
}
}

问题核心:mat-sidenav-contentmargin-left计算错误。作为一种解决方法,我将其硬编码为 230px,但如果用户未登录,这当然会在 sidenav 和内容之间产生丑陋的差距:

CSS:

@import '../../styles/colors.scss';

.logo-nav {
width: 100%;
text-align: center;
}

// Workaround
mat-sidenav-content {
margin-left: 230px !important;
}

enter image description here

如果用户已登录,则会显示较长的页面名称,这使得 left-margin 的计算正确。

enter image description here

最佳答案

有多种方法可以解决这个问题。例如:

  1. width 属性应用于您的 Logo 图像。可以是 100%230px,如您所用。
.logo-nav img {
min-width: 230px;
}
  1. width 属性设置为 sidenav 本身。 https://material.angular.io/components/sidenav/overview#setting-the-sidenav-39-s-size
.mat-sidenav {
width: 230px;
}
  1. mat-nav-list 的显示更改为 flex,方向为 column
.mat-nav-list {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

关于html - 如果图像在 sidenav 中,则 Material Sidenav 会溢出内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55570057/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com