css - 如何在侧面模式(有 Angular Material )下将 mat-toolbar 和 sidenav 保持在顶部？

Question

我想将 mat-sidenav 置于侧面模式。但我也想在顶部放置 mat-toolbar。

问题是当我滚动到 mat-menu 底部并且 sidenav 上升时，我希望它们保持原位(始终在顶部)。

我尝试将 position:fixed;width:100% 设置为 mat-toolbar 但 div 变大了，所以它隐藏了主页按钮。所以这是行不通的。

position: sticky;top: 0; 也不起作用。

知道如何正确地做到这一点吗？

The full code in stackblitz

Answer 1

我正在处理与 fixed header 和 <mat-sidenav mode="side"> 几乎相同的问题.

sidenav 可以使用 css 规则轻松修复 position: fixed

header 有 2 个问题:

• 最主要的是带有 position:fixed 的 header 打开sidenav时没有调整宽度(粘性定位无法解决)
• 第二个是对于具有动态高度的标题，一些内容会隐藏在标题下(对于固定高度，我们只需要将内容元素的上边距设置为固定值即可缓解此问题)

主要问题的解决方案是跟踪 <mat-sidenav-content> 的宽度并相应地调整标题的宽度。

第二个问题的解决方案与第一个类似 - 跟踪标题的高度并调整标题下元素的上边距。

在这两种情况下，都可以设置一个 css 变量并将其用于元素样式，而不是直接设置元素的高度。我的示例展示了这两种方式。

让我们看看它是如何工作的。

我们需要一个指令来跟踪调整大小事件。

import {
  Directive,
  ElementRef,
  OnDestroy,
  OnInit,
  Output,
} from '@angular/core';
import { Subject } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';


export interface Size {
  width: number;
  height: number;
}

@Directive({
  selector: '[myResize]',
})
export class ResizeDirective implements OnInit, OnDestroy {
  private resizeSubject = new Subject<Size>();
  private resizeObserver: ResizeObserver;

  @Output() myResize = this.resizeSubject.pipe(
    distinctUntilChanged(
      (a: Size, b: Size) => a.width === b.width && a.height == b.height
    )
  );

  constructor(private el: ElementRef) {
    this.resizeObserver = new ResizeObserver((entries) => {
      const size = {
        width: Math.trunc(entries[0].contentRect.width),
        height: Math.trunc(entries[0].contentRect.height),
      };
      this.resizeSubject.next(size);
    });
  }

  ngOnInit() {
    this.resizeObserver.observe(this.el.nativeElement);
  }

  ngOnDestroy() {
    this.resizeObserver.unobserve(this.el.nativeElement);
  }
}

然后我们将指令应用于 header 和 sidenav-content 元素。

<mat-sidenav-container class="container" autosize>
  <mat-sidenav class="sidenav" mode="side">
    Some navigation that expands from the side and thus shrinks the  &lt;mat-sidenav-content&gt;
    because of mode=side
  </mat-sidenav>

  <mat-sidenav-content #content class="sidenav-content" (myResize)="onContentResized($event)">
    <my-header class="header" (myResize)="onHeaderResized($event)"></my-header>
    <div class="content">
      <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

组件代码。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {

  @ViewChild('content') content!: MatSidenavContent;

  constructor(
    private renderer: Renderer2
  ) {}

  onContentResized(event: any) {
    console.log('on content resized event', event);

    //I am creating a css variable on <mat-sidenav-content> where my header and the main content element are located
    // thus the variable will be available to all descendants 
    this.renderer.setStyle(
      this.content.getElementRef().nativeElement,
      '--content-width',
      event.width + 'px',
      RendererStyleFlags2.DashCase
    );
  }

  onHeaderResized(event: any) {
    console.log('on header resized event', event);

    //I am setting the margin on content element directly
    this.renderer.setStyle(
      this.content.getElementRef().nativeElement,
      'margin-top',
      event.height + 'px',
      RendererStyleFlags2.DashCase
    );
  }
}

还有样式表。

.sidenav {
  position: fixed;
}

.header {
  position: fixed;
  top: 0;
  z-index: 100;
  width: var(--content-width, 100%);
}

注意:我只包含了代码的关键部分来解释解决方案。

如果有人有解决此问题的纯 css 解决方案，请不要犹豫与我们分享。我做了一些研究，但唯一可行的解​​决方案似乎是通过编码。