问题标签 [sidenav]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
83 浏览

html - 如何将下拉箭头添加到 sidenave 引导程序

我是 bootstrap 的新手,我一直在研究 sidenav。不幸的是,引导网站上的文档并没有包含太多关于侧导航的内容。我一直在努力,但我无法让箭头显示在下拉选项中。应该在哪里添加?在一个标签?

0 投票
1 回答
3199 浏览

css - 使用角度材料在 sidenav 中添加标题

示例图片

我需要帮助来实现上图所示的sidenav。我尝试了一些使用Mat-toolbar添加的步骤,但不确定如何添加标题并将其他列表置于其下方。就像在图片中一样,配置文件作为标题和详细信息,活动,发布在它下面。Stackblitz:https ://stackblitz.com/edit/angular-ve3igg

谢谢你。

0 投票
3 回答
5450 浏览

angular - Missing "Hamburger Icon" in Angular Material App

I am new to Angular world and I want to make a Dashboard (with SideNav and TopNav) with Angular Material. So, I installed everything and added the Angular Material library via :

I added also the ready to use component for teh sideNav and TopNav and called it "mynav":

when I run "ng serve -o" I got the sideNav and TopNav as wanted, but the HAMBURGER ICON to show and hide the sideNav is missing in the Desktop (or in any other widescreen device) view. See image here: enter image description here. In the mobile (or in any other small screen device) view though, the "Hamburger menu" is visible and working (toggling function: open and hide the SideNav). See image here: enter image description here.

How to get the "Hamburger Icon" appearing in the big screens like laptops or desktops? I know i should edit the breakpoints for that, but how? Here is the generated code in "mynav.component.html" :

0 投票
2 回答
6224 浏览

javascript - 无法绑定到“模式”,因为它不是“mat-sidenav”的已知属性

嗨,我不知道该怎么办

这是错误

我的结构是这样的

在此处输入图像描述

  1. Sidenav 由@angular/material:material-nav --name=sidenav

  2. 导入从app.module.ts移动到app.material.module.ts ,其中 包括 MatToolbarModule、MatButtonModule、MatSidenavModule、MatIconModule、MatListModule

  3. AdminLayoutComponent 和 AuthLayoutComponent 是这里唯一的组件

  4. 材料模块是

0 投票
0 回答
2973 浏览

css - Angular 7 Material Sidenav 固定在视口中

使用材料的SideNav 示例中的这个示例我遇到了一个大问题

我不希望我的 sidenav 重叠在我的导航栏/工具栏上

这是我的代码

这是它的图像在此处输入图像描述

0 投票
1 回答
147 浏览

yii2 - 如何以另一种风格制作 SideNav 的活动项?

我希望 yii2 应用程序中 Kartik 的 SideNav 中的项目在它处于活动状态时更改颜色(被单击并打开)。

抱歉,我对 PHP 和 Yii 很陌生,问题可能很明显,但我真的在这里堆叠。

我已经尝试使用文档中解释的“活动”选项,但它不起作用。它没有显示任何错误但无法正常工作。我有一个文件adminMenu.php,其中写入了 SideNav。以及我展示它的panel.php视图文件。

另外,我尝试添加回声

但它显示错误,因此我现在评论它。

adminMenu.php:

面板.php:

0 投票
1 回答
1884 浏览

angular - Angular Material 不可滚动的sidenav

我正在研究 Angular Material sidenav。向下滚动主页时​​,如何使侧面导航不滚动但保持静止?

0 投票
1 回答
617 浏览

angular - 如何在所有页面上显示材质侧导航

我已经创建了材料侧导航并将其添加到我的应用程序中,但它无法正常工作。我需要将导航组件放在哪里?

我想用侧导航替换我的应用程序的水平导航,我使用了材料侧导航。当我单击按钮打开菜单时,即使我在应用程序组件中实现导航,逻辑也不适用于所有组件。如何修复可见性?

这是我的菜单组件:

这是我的应用程序组件:

菜单可以正常打开,但不会覆盖整个页面。如果我将菜单放在应用程序组件的其他组件上方,我会得到一个空白页面,但没有任何错误:

图 1:

在此处输入图像描述

图 2:

在此处输入图像描述

图 3:

在此处输入图像描述

0 投票
1 回答
2661 浏览

angular - 使用工具栏强制 Angular Material sidenav 容器填充高度

我无法让 Angular Material sidenav 容器填充屏幕的高度。sidenav 以及 sidenav 内容与适合其内容所需的高度一样高。我想让它的高度填满屏幕。

导航组件的 HTML:

父(根)组件的 HTML:

我并没有真正应用 CSS:

这是它的样子: sidenav 不填充高度

我已经尝试将 mat-sidenav-container 设置为全屏,但这会隐藏 mat-toolbar。当我将容器设置为具有“顶部:”以便再次显示工具栏时,滚动不足以显示整个页面内容。

Stackblitz 示例:https ://stackblitz.com/edit/angular-mcbhqt-r7kmlw

0 投票
1 回答
485 浏览

css - Angular 中的侧导航面板

我正在尝试添加一个按钮(打开侧面板),但由于某种原因它显示在页面的左上角。我希望它出现在中间(右侧),因此当用户单击它时,面板会显示。我还希望在侧面板打开时放大页面上的当前内容,以便用户能够同时看到面板和当前内容。

你想谈什么的描述

正确的 CSS 是什么?