javascript - md-sidenav toggle() 位于 md-toolbar 之上-6ren

javascript - md-sidenav toggle() 位于 md-toolbar 之上

转载作者：可可西里更新时间：2023-11-01 02:35:40

32

4

我希望能够在不隐藏 md-toolbar 左上角的情况下切换 sidenav，类似于如何 Google Inbox作品:

_{(来源:cbsistatic.com)}

似乎是切换功能引起的，因为没有动画，sidenav 显示在 md-toolbar 下方。

这可能吗？

<body layout="column" ng-controller="mainCtrl">
<md-toolbar layout="column" class="md-medium-tall"><span flex="flex"></span>
    <div class="md-toolbar-tools">
        <md-button class="menu" ng-click="toggleLeft()">
            <md-icon md-svg-src="assets/svg/menu.svg"></md-icon>
        </md-button>
        <div layout="row" flex="flex" class="fill-height">

            <div class="md-toolbar-item md-breadcrumb">
                <span>Title</span></div>
            <span flex="flex"></span>
        </div>
    </div>
</md-toolbar>


<div layout="row">
    <md-sidenav layout="column" md-component-id="left" class="md-whiteframe-z2 md-sidenav-left" >

        <md-list>
            <md-list-item>
                <md-button>Hey</md-button>
            </md-list-item>
        </md-list>

    </md-sidenav>
</div>

<script src="bower_components/jquery/dist/jquery.min.js"></script>

<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>

<script src="bower_components/angular-material/angular-material.min.js"></script>
<script src="js/app.js"></script>

和 app.js

var app = angular.module('anApp', ['ngMaterial'])
.controller('mainCtrl', ['$scope', '$mdSidenav', '$mdUtil', function ($scope, $mdSidenav, $mdUtil) {


$scope.toggleLeft = buildToggler('left');

function buildToggler(navID) {
    var debounceFn = $mdUtil.debounce(function () {
        $mdSidenav(navID)
            .toggle()
    }, 100);
    return debounceFn;
}}]);

谢谢!

最佳答案

我也遇到了同样的问题，@William S 的解决方案对我不起作用。如果它具有相对位置，SideNav 将无法正确显示。我通过将 SideNav 和 Content 放在 <md-content flex></md-content> 中来让它工作:

<md-toolbar>
    <div class="md-toolbar-tools">
        <md-button class="md-icon-button" ng-click="openLeftMenu()">Menu</md-button>
    </div>
</md-toolbar>

<md-content flex>
    <md-sidenav md-component-id="left" class="md-sidenav-left md-whiteframe-z2" layout="column">
        <md-list>
            <md-list-item>

                <md-item-content md-ink-ripple>
                    <div class="inset">Item 1</div>
                </md-item-content>

            </md-list-item>
        </md-list>
    </md-sidenav>

    <md-content>Content</md-content>
</md-content>

关于javascript - md-sidenav toggle() 位于 md-toolbar 之上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31366038/

32

4

0

文章推荐： c++ - boost::asio::async_read 在换行符上返回文件结尾错误

文章推荐： java - 使用日期样本作为输入进行日期格式预测

文章推荐： java - 如何解决 Eclipse 中的导入问题？

文章推荐： C# 客户端/服务器 : using Streamreader/writer

materialize - 在 sideNav 外部单击时禁止关闭 sideNav
我在我的应用程序中使用 MaterializeCSS 的 sideNav。我不想在点击外部时关闭 sideNav。它可以在这样的模态中实现: { dismissible: false } 如何在 si
javascript - sidenav 叠加在粘性导航栏上，sidenav 叠加的高度有问题
我对 sidenav 叠加层的高度有这个问题，我知道它与粘性导航栏的 javascript 混淆，但我不知道如何使 sidenav 的高度达到 100%。任何帮助将不胜感激! 代码如下:
javascript - SideNav - MaterializeCss - 绑定(bind)事件 sidenav 关闭
当 sidenav 关闭时，我找不到任何方法来绑定(bind)火的东西 ( http://materializecss.com/side-nav.html ) 我什至找不到相关的文档。其实我正在做一
html - 如果图像在 sidenav 中，则 Material Sidenav 会溢出内容
早上好! 我在我的 Angular 应用中使用 Material Design 侧边导航来为用户提供页面选择。侧面导航首先包含 Logo ，然后是用户可以选择的所有页面 - 如果他已登录。问题:如果
angular - mat-toolbar、mat-sidenav 和 mat-sidenav-container 不是已知元素
我正在尝试使用 mat-toolbar 但出现错误: mat-menu.component.html: Responsive Navigation Menu I
javascript - 使用 Material Angular 和 Leaflet 切换 sidenav 时调整 sidenav-content 的大小
我正在使用 Angular、Angular-Material 和 Leaflet 创建一个具有 sidenav 和 map 的网络。
angular - sidenav 生成已经声明结束的抽屉
我有以下代码: Settings
javascript - 带点滚动的 sidenav
我问了类似的问题，但没有得到答案，所以我会再试一次。我有一个网页。在此页面中，我试图用点制作侧面导航。网页被分成几个部分。我需要做到这一点，以便每次滚动到另一个部分时，该点都会改变颜色。例如:第一部分
javascript - $(...).sideNav 不是函数
我刚刚下载了 mdbootstrap。按照在网页上实现侧面导航的说明进行操作后，当我尝试初始化它时，出现以下错误: Uncaught TypeError: $(...).sideNav is not
javascript - 来自多个按钮的多个 Sidenavs？
我正在处理一个在屏幕右侧有五个图标的网站。在一个完美的世界中，点击每个图标都会打开其各自的 sidenav。例如: MyBtn onclick 打开 sidenav 并关闭所有其他 sideav。
javascript - Sidenav 栏应从右侧而不是左侧打开
我有一个简单的 javascript 可以为我打开一个侧边栏，但我希望它在右侧而不是左侧。请参阅下面的 gif 和代码。任何人都知道我需要做什么来解决这个问题？非常感谢您添加的任何解释，以便我更好地理
html - sidenav 内容不对齐
我的 sidenav 中的内容不在其容器内。它在 jsfiddle 中看起来不错，但在我的浏览器中却不行。 (Firefox 17.1 Ubuntu Quantal) jsfiddle
html - 如何删除母版页中的页眉和 sidenav？
我创建了一个母版页 - wrap.master，其中附有许多内容页。现在我想创建一个新的内容页面并附加到它上面。母版页有一个标题和侧面导航。但是在我的新内容页面中，我不想要标题和侧面导航。通常，我希望
javascript - sidenav 关闭时按钮不起作用
由于某些原因，我正在我的网站按钮上的登录页面上工作，当 sidenav 退出时提交按钮不可点击(我正在使用物化框架)。我对我的 sidenav 做了一些修改，这样当覆盖层出来时它就会被移除，并且在它
javascript - Sidenav 覆盖固定在右上角
大家好，我正在尝试让固定在右上角的导航来自屏幕的右侧(从右到左的动画)。现在使用来自 w3school 的示例，我能够想出以下代码:HTML: × About Services Cli
html - 点击打开reactjs sideNav
我试图在点击按钮时打开react sideNav栏。我指的是这些文章来做到这一点: https://github.com/gauravchl/react-simple-sidenav https://
具有双倍滚动内容的 Angular Material Sidenav
对于基于 Angular Material 的项目，我正在尝试使用 sidenav具有不同 View 可能性的组件，具体取决于用户的设备(台式机或手机)。到目前为止它有效，但有一些问题。也就是说，内容
angular - 在外部单击时关闭 mat-sidenav
每当用户点击不在侧边栏中的某个地方时，我都会尝试关闭侧边栏。我已经尝试过双向数据绑定(bind)，现在正在尝试 rxjs' Subject 应用模板应用组件 openedSubject = new
css - 如何禁用 sidenav 上的滚动
我想问我有一个显示隐藏菜单(openNav，closeNav) 这是我的 javascript : function openNav() { document.getElementById(
选项卡主体内的 Angular Material sidenav
像下面这样在 mat-tab 中加载 sidenav 是否有效？ Sidenav Main Content

首页

博学

6Ren·AI

商城

javascript - md-sidenav toggle() 位于 md-toolbar 之上