如何使用Angular-Material获得完整高度的sidenav
我正在使用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();
};
};
})();
这个工作对我来说...
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>
这对我有效,而另一个答案没有。 – 2015-05-15 19:51:37
在较新的版本中,您可能会看到:*“$ media is is being used for is-locked-open。Use $ mdMedia instead”*。在这种情况下,使用这个'is-locked-open =“$ mdMedia('sm')”' – 2015-05-26 07:26:26
THANK LORD !!!!! – petur 2015-11-03 11:39:13
我对角材料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两个锁定开放和解锁模式工作的罚款。
不应该是'layout =“列”'而不是'layout =“vertical”'? – demisx 2014-12-27 17:06:53
'layout =“列”'不再有效。使用更新版本的角度材料时,应该使用'layout =“vertical”'或'layout =“horizontal”'。 – 2015-02-03 17:01:40
截至0.8.3(今日):https://material.angularjs。org /#/ layout/container(即行/列) – 2015-04-09 14:04:38
只需创建一个<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>
此代码会给你一个完全垂直的侧栏。
我加入一个类来我sidenav与
position: fixed;
'md-sidenav {position:fixed}'和'md-backdrop.md-opaque {position:fixed}'对我来说是一个快速简单的修复。谢谢@phil_Igr – 2016-07-27 17:58:15
+ million - >花了我一天的时间才得到这个'固定' – 2017-01-22 15:21:00
尝试增加对主要md-content
标签已经ui-view
属性设置layout-fill
属性修正了这个同样的问题。
确保父容器也有适当标记的布局填充。 – 2016-12-30 18:38:33
您需要在侧边栏和内容都使用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>
这是为我工作的人(在Angular Material 1.0.5上),其他人都没有使用最新的更新。 – Jascination 2016-02-05 19:24:02
没有为我工作的角度材料版本以上的: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
上述问题只是通过修改CSS和无需更改任何代码解决。
解决方案- .ng-scope {height:100%; }
<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>
测试
我有一个类似的问题。设置风格“高度:100vh;”为我工作。你也可以使用一个班级。
<div layout="column" style="height:100vh;"></div>
layout =“vertical”也可以使用 - 它在我的上下文中没有任何显着的效果。
我试过很多事情来解决这个问题,我终于能够通过直接添加的UIView我的菜单组件进行修复: <menu uiview layout="column" class="menu"> </menu>
我没有尝试其他的修复用指令,但我使用这个简单的CSS,并得到我所需要的。任何关于这个CSS的更正或建议将受到欢迎。
md-sidenav {
height: -webkit-fill-available;
}
您可能想要包括您期望在此支持的浏览器...有可能使用vh(视口高度)的解决方案,但这在旧版本的CSS中不可用。或者,您可以使用一个指令来监视任何调整大小的事件,并使用offsetHeight或者screen.height捕获元素的更新高度并将其存储在某个地方(值或服务或工厂) – shaunhusain 2014-11-01 14:06:52