问题标签 [mat-sidenav]

我正在制作一个 Angular 9 应用程序，我想在我的项目中添加一个 sidenav。

我想要的 sidenav 就像这个 Primer Angular Template --> Primer - Angular 8+ Material

这就是我要的

这就是我用我的 scss 和 html 得到的。问题是侧边栏折叠时内容没有调整大小，然后样式被破坏。mat-sidenav-container为此，我正在寻找答案mat-sidenav

HTML

SCSS

请帮忙

更新 这是一个 Stackblitz 示例 --> https://stackblitz.com/edit/angular-xa3n5i

如何检查 MatSidenav 组件是否完成了关闭动画？我正在查看文档，但我只能看到一个 closedStart 事件。是否有一些解决方法或我想要做的事情？

为什么sidenav只出现在标题中？

我不知道出了什么问题。app.component.html：

header.component.html：

和 sidenav-list.component.html：

我正在使用：Angular 9.1.4 和 Angular/Material 9.2.4

对于我目前正在做的一个项目，需要在材质侧导航中创建动态组件。

https://material.angular.io/components/sidenav/overview

我已经全部设置好了，它确实可以工作，除了新的请求，即如果动态组件高度例如为 400 像素，材质侧导航不会扩展到底部，而是在组件的高度处切断。

有谁知道这样做的干净方法？如果不是，它也可能与 CSS 技巧有关。

这是一个 stackblitz 示例 https://stackblitz.com/angular/kknqvrklpgx?file=src%2Fapp%2Fsidenav-autosize-example.ts

我正在使用 mat-sidenav-container 创建我的页面的桌面版本，但我想让 mat-sidenav toggleable ，我已经设法做到了。现在的问题是我在 mat-sidenav-content 上有一个固定的标题，当显示 mat-sidenav 时，该部分没有被推送。

对于 mat-sidenav-content，我使用 css 网格将此部分分为两部分（固定标题和主要内容）

这是一个 stackblitz 演示。

你知道我怎样才能让 mat-sidenav 也推动固定的标题吗？

谢谢。

我正在使用 Angular 9.1.11 和 Angular Material 9.2.4 。当我尝试导入MaterialSidenavModule时遇到此问题，因此我可以使用mat-sidenav-container等组件。

这是我的 app.module.ts 文件：

问题是我的 IDE (WebStorm) 告诉我 MatSidenavModule 不是 Angular 模块并且不会导入它。我的 sidenav 组件也有错误，我想使用的所有材料 sidenav 组件都不是有效的 html 标签...

组件的 HTML 模板：

我所有的其他导入工作都很好，但这个不会停止破坏我的应用程序。我在哪里做错了？

请在此处查看代码：https ://stackblitz.com/edit/angular-sidenav-mixedpushover

我想设置一个有角度的材质sidenav，以便它有一个始终可见的切换按钮，并在sidenav 打开和关闭时滑动。当按钮和sidenav打开时（即mode="over"），主要内容区域应该被按钮和sidenav遮挡。

基本上我希望sidenav在“over”模式下运行，但要“按下”切换它的按钮。

我尝试了几种方法，但没有一种方法很正确。我当前的实现（不共享，因为很难做一个简单的例子）有两个切换按钮：一个位于屏幕边缘，手动显示/隐藏，另一个按钮是 sidenav 内容本身的一部分. 如果你眯着眼睛，它几乎就像一个随 sidenav 滑动的按钮！我还使用了一些动画来尝试将两个按钮混合一点，但是很难匹配 sidenav 的速度。

我正在尝试做的一些图片。

Sidenav 已关闭：

西德纳夫开放中：

有人有任何可行的建议吗？谢谢！

我正在使用角度材料版本 8.x。在我的应用程序中。使用过 mat-sidenav-container。当我打开菜单时，mat-drawer-content 也可以滚动，并且在将其滚动到底部或顶部时，侧面菜单（mat-sidenav）正在接近。是否有任何可用的修复程序。

按照非常简单的步骤使用 sidenav 创建响应式工具栏，我遇到了一个让我发疯的小问题。

从基本原理图ng generate @angular/material:navigation sideNav

我希望工具栏似乎延伸到侧边栏上。 那里已经有一个工具栏，但在默认示意图中，它的 css 设置为继承背景：

因此，如果我将其注释掉，然后将颜色添加到<mat-toolbar color="primary">Menu</mat-toolbar>

我得到这条白线分隔两个工具栏。

我可以在 sidenav div 之外手动制作一个工具栏，但我很确定这是错误的做法，而且我觉得有一些非常简单和明显的东西我没有得到。

任何指针都非常感谢。

我正在尝试在 Angular 中使用经典的页眉、页脚和侧边栏导航和 Angular Material。但是，我在设置高度时遇到问题，导致视口中出现多个滚动问题。

我附上布局以供参考。我在父 sidenav 的 sidenav 内容内使用内部 sidenav。