Question

我希望在右侧有一个锁定左侧的内容，在平板电脑/移动视图中会折叠并隐藏。我希望它具有与Angular Material doc网站相同的功能，或类似于此codepen的功能。现在，我的内容在锁定打开时不会显示在我的sidenav的右侧，在屏幕的其余部分有一些余量。如果我将屏幕缩小以使sidenav折叠，则内容会显示但不可滚动。

这就是我的index.html的结构：

    <body class="docs-body" ng-cloak ng-app="TrooNews" ng-controller="AppController as app">

            <md-sidenav
                class="site-sidenav md-sidenav-left md-whiteframe-z2"
                md-component-id="left" hide-print
                md-is-locked-open="$mdMedia('gt-sm')">

                <header class="nav-header">
                  <a ng-href="/" class="docs-logo">
                    <img src="resources/logo.svg" alt="" />
                    <h1 class="docs-logotype md-heading">Troo News</h1>
                  </a>
                </header>

                <md-content flex role="navigation">
                    <md-list>
                        <md-list-item ng-repeat="item in app.menu" ng-click="app.navigateTo(item.link)">
                            <md-icon>{{item.icon}}</md-icon>
                            <p>{{item.title}}</p>
                        </md-list-item>
                    </md-list>
                </md-content>
            </md-sidenav>

            <div layout="column" tabIndex="-1" role="main" flex>

                <md-toolbar class="md-whiteframe-glow-z1 site-content-toolbar">

                  <div class="md-toolbar-tools docs-toolbar-tools" tabIndex="-1">
                    <md-button class="md-icon-button" ng-click="app.toggleSidenav('left')" hide-gt-sm aria-label="Toggle Menu">
                      <md-icon>menu</md-icon>
                    </md-button>
                    <div layout="row" flex class="fill-height">
                      <h2 class="md-toolbar-item md-breadcrumb md-headline">
                        <span class="md-breadcrumb-page">Test</span>
                      </h2>

                      <span flex></span> <!-- use up the empty space -->

                      <div class="md-toolbar-item" layout="row">
                            <div class="search">
                                <md-icon class="search_icon">search</md-icon>
                                <input ng-model="searchCard">
                            </div>
                      </div>
                    </div>
                  </div>

                </md-toolbar>

                <md-content md-scroll-y layout="column" flex>
                  <div ng-viewport flex="noshrink"></div>

                  <div layout="row" flex="noshrink">
                    <div id="license-footer">
                      Powered by Troo News.
                    </div>
                  </div>
                </md-content>

            </div>




    </body>

任何帮助/见解都将不胜感激。

Answer 1

检查此笔。 http://codepen.io/next1/live/MymXqY您应该像我在此示例中使用的那样使用layout-fill和layout attrivute。

角度材料锁定md-sidenav占据整个屏幕

1 个答案: