1. 首页
  2. 问答
  3. 如何使用Angular-Material获得完整高度的sidenav

如何使用Angular-Material获得完整高度的sidenav

2014-11-01 75 views
29

我正在使用Angular-Material并已实施SideNav菜单。当屏幕尺寸很小时，菜单被隐藏，当点击菜单切换按钮时，菜单从左侧滑出，具有整页高度。当屏幕较大时，菜单固定在左侧，但不是全页高度。如何使用Angular-Material获得完整高度的sidenav

如何使固定菜单显示为整页高度。 我一直在玩css和其他md属性，但只是无法找到如何。

<div ng-controller="appCtrl" layout="vertical" layout-fill> 

<md-toolbar class="md.medium-tall app-toolbar"> 
    <div class="md-toolbar-tools" ng-click="toggleMenu()"> 
     <button class="menu-icon" hide-sm aria-label="Toggle Menu"> 
      <md-icon icon="img/icons/ic_menu_24px.svg"> 
       <object class="md-icon" data="img/icons/ic_menu_24px.svg"></object> 
      </md-icon> 
     </button> 
     <h2> 
      <span>Dev.Material</span> 
     </h2> 
    </div> 
</md-toolbar> 

<section layout="horizontal" flex> 
    <md-sidenav class="md-sidenav-left md-whiteframe-z2" component-id="menu" is-locked-open="$media('sm')"> 

     <md-toolbar md-theme="purple"> 
      <h1 class="md-toolbar-tools">Sidenav Left</h1> 
     </md-toolbar> 

     <md-content class="md-padding" ng-controller="menuCtrl"> 
      <p> 
       This sidenav is locked open on your device. To go back to the default behavior, 
       narrow your display. 
      </p> 
     </md-content> 
    </md-sidenav> 

    <md-content flex class="md-padding"> 
     Some content !! 
    </md-content>

和控制器：

(function() { 
'use strict'; 

var controllerId = 'appCtrl'; 
angular.module('app').controller(controllerId, 
    ['$scope', '$timeout', '$mdSidenav', appCtrl]); 

function appCtrl($scope, $timeout, $mdSidenav) { 
    var vm = this; 

    $scope.toggleMenu = function() { 
     $mdSidenav('menu').toggle(); 
    }; 
};  
})(); 

(function() { 
'use strict'; 

var controllerId = 'menuCtrl'; 
angular.module('app').controller(controllerId, 
    ['$scope', '$timeout', '$mdSidenav', menuCtrl]); 

function menuCtrl($scope, $timeout, $mdSidenav) { 
    var vm = this; 

    $scope.close = function() { 
     $mdSidenav('menu').close(); 
    }; 
}; 
})();

来源

2014-11-01 James

+0

您可能想要包括您期望在此支持的浏览器...有可能使用vh（视口高度）的解决方案，但这在旧版本的CSS中不可用。或者，您可以使用一个指令来监视任何调整大小的事件，并使用offsetHeight或者screen.height捕获元素的更新高度并将其存储在某个地方（值或服务或工厂） – shaunhusain 2014-11-01 14:06:52

回答

18

这个工作对我来说...

1）环绕你sidenav在具有布局一个div = “垂直”像这样...

<div ng-include="'scripts/shared/sidenav/sidenav.html'" layout="vertical"></div>

2）在你的sidenav中添加“flex”，这样它就会弹性地填充整个页面的高度。

<md-sidenav class="md-sidenav-left md-whiteframe-z2" component-id="menu" is-locked-open="$mdMedia('sm')" flex>

来源

2014-11-17 06:14:01

+1

这对我有效，而另一个答案没有。 – 2015-05-15 19:51:37

+1

在较新的版本中，您可能会看到：*“$ media is is being used for is-locked-open。Use $ mdMedia instead”*。在这种情况下，使用这个'is-locked-open =“$ mdMedia（'sm'）”' – 2015-05-26 07:26:26

+2

THANK LORD !!!!! – petur 2015-11-03 11:39:13

25

我对角材料0.6.0 rc1有完全相同的问题。 （我使用了demo site的代码）。

该问题不是来自角材料代码，而是来自您的页面的父级CSS容器，它不是全高。

你的页面应该有这样的结构：

<ui-view class="ng-scope"> 
    <div ng-controller="appCtrl" layout="vertical" layout-fill> 
     ... your md sidenav code here ... 
    </div> 
</ui-view>

问题来自于NG-scope类至极是不是满的高度。在我来说，我只是复制/粘贴从demo site的代码，并添加该即时通讯我对自定义的CSS文件

.ng-scope { height: 100%; }

结果是一个全高sidenav两个锁定开放和解锁模式工作的罚款。

来源

2014-11-23 13:43:32 Elijun

+1

不应该是'layout =“列”'而不是'layout =“vertical”'？ – demisx 2014-12-27 17:06:53

+1

'layout =“列”'不再有效。使用更新版本的角度材料时，应该使用'layout =“vertical”'或'layout =“horizo​​ntal”'。 – 2015-02-03 17:01:40

+8

截至0.8.3（今日）：https：//material.angularjs。org /＃/ layout/container（即行/列） – 2015-04-09 14:04:38

1

只需创建一个<div>以外的sidenav。例如，就在<body>标签后，你可以写：

<body layout="row"> 
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$media('gt-md')"> 
    <md-toolbar md-theme="deep-orange"> 
     <h2 class="md-toolbar-tools">Menu</h2> 
    </md-toolbar> 
    <md-content ng-controller="menuBar" md-theme="deep-orange"> 
     <md-button layout-align="left" ng-repeat="item in items" ui-sref="{{item.location}}" class="menu-item" 
     md-ink-ripple="#bbb" aria-hidden="false"> 
<!-- the above <md-button> just repeats buttons created in the JS --> 
     <span>{{item.label}}</span> 
     </md-button> 
    </md-content> 
</md-sidenav> 
<!-- Other content ... --> 
</body>

此代码会给你一个完全垂直的侧栏。

来源

2015-01-09 14:16:59

11

我加入一个类来我sidenav与

position: fixed;

来源

2015-04-02 00:04:33

+3

'md-sidenav {position：fixed}'和'md-backdrop.md-opaque {position：fixed}'对我来说是一个快速简单的修复。谢谢@phil_Igr – 2016-07-27 17:58:15

+0

+ million - >花了我一天的时间才得到这个'固定' – 2017-01-22 15:21:00

4

尝试增加对主要md-content标签已经ui-view属性设置layout-fill属性修正了这个同样的问题。

​​3210

来源

2015-05-27 08:01:35 sajmons

+0

确保父容器也有适当标记的布局填充。 – 2016-12-30 18:38:33

2

您需要在侧边栏和内容都使用flex，以及顶部容器。这样您就不需要使用任何其他样式。

这里工作你的代码正确（注意，我更新的某些部分最新角材质的版本）：

<div ng-controller="appCtrl" layout="column" flex> 

<md-toolbar class="md.medium-tall app-toolbar"> 
    <div class="md-toolbar-tools" ng-click="toggleMenu()"> 
     <button class="menu-icon" hide-sm aria-label="Toggle Menu"> 
      <md-icon icon="img/icons/ic_menu_24px.svg"> 
       <object class="md-icon" data="img/icons/ic_menu_24px.svg"></object> 
      </md-icon> 
     </button> 
     <h2> 
      <span>Dev.Material</span> 
     </h2> 
    </div> 
</md-toolbar> 

<section layout="row" flex> 
    <md-sidenav flex class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')"> 

     <md-toolbar md-theme="purple"> 
      <h1 class="md-toolbar-tools">Sidenav Left</h1> 
     </md-toolbar> 

     <md-content class="md-padding" ng-controller="menuCtrl"> 
      <p> 
       This sidenav is locked open on your device. To go back to the default behavior, 
       narrow your display. 
      </p> 
     </md-content> 
    </md-sidenav> 

    <md-content flex class="md-padding"> 
     Some content !! 
    </md-content> 
</section> 
</div>

来源

2015-08-28 16:07:59

+0

这是为我工作的人（在Angular Material 1.0.5上），其他人都没有使用最新的更新。 – Jascination 2016-02-05 19:24:02

0

没有为我工作的角度材料版本以上的：1.1.0- RC.5，所以我做了这样的：

<body layout="column"> 

<div layout="row" ng-controller="reviewController" ng-cloak flex> 

    <div layout="row"> 
      <md-sidenav class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')" md-whiteframe="4" layout="column"> 
      <md-toolbar class="md-theme-indigo" class="md-medium-tall"> 
       <h1 class="md-toolbar-tools">Sidenav Left</h1> 
      </md-toolbar> 
      <div ng-controller="LeftCtrl"> 
       <md-button ng-click="close()" class="md-primary" hide-gt-sm> 
        Close Sidenav Left 
       </md-button> 
       <p hide show-gt-sm flex> 
        This sidenav is locked open on your device. To go back to the default behavior, narrow your display. 
       </p> 
       <p flex> 
        hi 
       </p> 
       <p flex> 
        there! 
       </p> 
      </div> 
     </md-sidenav> 
     <div layout-column flex> 

      <p flex> 
       The left sidenav will 'lock open' on a medium (>=960px wide) device. 
      </p> 
      <p flex> 
       The right sidenav will focus on a specific child element. 
      </p> 
      <div flex> 
       <md-button ng-click="toggleLeft()" class="md-primary" hide-gt-sm> 
        Toggle left 
       </md-button> 
      </div> 
      <div flex> 
       <md-button ng-click="toggleRight()" ng-hide="isOpenRight()" class="md-primary"> 
        Toggle right 
       </md-button> 
      </div> 

      <md-content ui-view layout="column" flex></md-content> 
     </div> 
     <md-sidenav class="md-sidenav-right md-whiteframe-4dp" md-component-id="right"> 
      <md-toolbar class="md-theme-light"> 
       <h1 class="md-toolbar-tools">Sidenav Right</h1> 
      </md-toolbar> 
      <md-content ng-controller="RightCtrl" layout-padding> 
       <form> 
        <md-input-container> 
         <label for="testInput">Test input</label> 
         <input type="text" id="testInput" ng-model="data" md-autofocus> 
        </md-input-container> 
       </form> 
       <md-button ng-click="close()" class="md-primary"> 
        Close Sidenav Right 
       </md-button> 
      </md-content> 
     </md-sidenav> 
    </div> 
</div>

上面的代码作为在安古拉给出几乎相同[R材料文档和的js文件也类似于文档:)给出
编辑：
更多的参考资料：
1. https://gist.github.com/epelc/6aa345f4496776569830。的$media('gt-lg')的折旧值修正为$mdMedia('gt-sm')
2. https://github.com/angular/material/issues/1092

来源

2016-07-15 12:17:00

0

上述问题只是通过修改CSS和无需更改任何代码解决。

解决方案- .ng-scope {height：100％; }

来源

2016-08-10 08:41:12 Manpreet

0 
<div layout="column" layout-fill> 
<section layout="row" flex> 
    <md-sidenav class="md-sidenav-left" 
       md-component-id="left" 
       md-is-locked-open="$mdMedia('gt-md')" 
       md-disable-backdrop 
       md-whiteframe="4"> 

     <md-content> 
      <div layout="row" layout-align="center center"> 
       <md-button ng-click="closeSideNav()" class="md-primary"> 
        Agregar Zona + 
       </md-button> 
      </div> 

      <p hide show-gt-md> 
       This sidenav is locked open on your device. To go back to the default behavior, 
       narrow your display. 
      </p> 
     </md-content> 
    </md-sidenav> 
</section>

测试

来源

2016-11-11 21:01:45 Vesper

4

我有一个类似的问题。设置风格“高度：100vh;”为我工作。你也可以使用一个班级。

<div layout="column" style="height:100vh;"></div>

layout =“vertical”也可以使用 - 它在我的上下文中没有任何显着的效果。

来源

2017-02-27 18:33:52 phil

0

我试过很多事情来解决这个问题，我终于能够通过直接添加的UIView我的菜单组件进行修复： <menu uiview layout="column" class="menu"> </menu>

来源

2017-03-13 21:42:15 cheesydoritosandkale

0

我没有尝试其他的修复用指令，但我使用这个简单的CSS，并得到我所需要的。任何关于这个CSS的更正或建议将受到欢迎。

md-sidenav { 
    height: -webkit-fill-available; 
}

来源

2017-11-24 06:45:15

相关问题

 相关问题