材料角度的侧栏是否支持打开"lock in"？

Question

我想知道是否有其他UI库支持此功能(打开后锁定侧栏(。我知道这会很有用，但它更老了，所以我仍在考虑Angular Material是否仍然是侧栏的api(为了库的一致性(的一个选项。

谢谢！

Answer 1

在我看来，您正在寻找MatDrawer上mode属性的等效值，该属性可以设置为文档中指定的以下值之一：

• over：侧导航浮动在由背景覆盖的主要内容上
• push：Sidenav将主要内容推到一边，并用背景覆盖它
• side：侧导航与主内容并排显示，缩小主内容的宽度为侧导航腾出空间

您可能正在查找side值。

这里有一个例子：

<mat-sidenav mode="side">
<!-- Contents of sidenav -->
</mat-sidenav>

如果您想根据设备介质切换模式，可以使用Angular CDK的BreakpointObserver实用程序类。

(注：以下代码部分改编自Angular Material的导航示意图(

export class YourComponent {
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches),
shareReplay()
);
constructor(private breakpointObserver: BreakpointObserver) {}
}

在组件的模板中：

<mat-sidenav #drawer
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="(isHandset$ | async) === false">
<!-- Contents of sidenav -->
</mat-sidenav>