如何使用 Angular-Material 获得全高侧导航
Posted
技术标签:
【中文标题】如何使用 Angular-Material 获得全高侧导航【英文标题】：How to get a full height sidenav with Angular-Material 【发布时间】：2014-12-28 16:01:09 【问题描述】：我正在使用 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();
;
;
)();
【问题讨论】：
您可能希望在此处包含您希望支持的浏览器...可能有使用 vh（视口高度）的解决方案，但这在旧版本的 CSS 中不可用。或者，您可以使用一个指令来监视任何调整大小事件并使用 offsetHeight 或 screen.height 捕获元素的更新高度并将其存储在某处（在值或服务或工厂中） 【参考方案1】：这对我有用...
1) 将你的 sidenav 包裹在一个具有 layout="vertical" 的 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>
【讨论】：
这对我有用，而其他答案没有。 在较新的版本中，您可能会看到："$media is deprecated for is-locked-open. Use $mdMedia instead"。在这种情况下使用这个is-locked-open="$mdMedia('sm')"
非常感谢！上面的答案有助于父容器布局设置，但是每当我将md-is-locked-open 设置为true 时，sidenav 只会拉伸其子容器所需的最小高度。我没想到要使用flex。【参考方案2】：
我在 angular-material 0.6.0 rc1 上遇到了完全相同的问题。 （我使用了来自demo site 的代码）。
问题不是来自 angular-material 代码，而是来自页面的父 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%;
结果是全高度侧导航在锁定打开和解锁模式下都能正常工作。
【讨论】：
不应该是layout="column"而不是layout="vertical"吗？
layout="column" 不再起作用。对于较新版本的 angular-material，应使用 layout="vertical" 或 layout="horizontal"。
截至 0.8.3（今天）：material.angularjs.org/#/layout/container（即行/列）【参考方案3】：
只需在<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>
此代码将为您提供一个完全垂直的侧边栏。
【讨论】：
【参考方案4】：我通过向我的 sidenav 添加一个类来解决同样的问题
position: fixed;
【讨论】：
md-sidenav position:fixed 和 md-backdrop.md-opaque position:fixed 对我来说是一个快速简单的解决方案。谢谢@phil_Igr
+million --> 我花了一天的时间才把这个“修复”【参考方案5】：
尝试在具有ui-view 属性集的主要md-content 标记上添加layout-fill 属性。
<md-content ui-view layout-fill layout-align="center center">
</md-content>
【讨论】：
确保父容器也被适当地标记为布局填充。【参考方案6】：您需要在侧边栏和内容以及顶部容器中使用flex。这样您就不需要使用任何其他样式。
这是您的代码正常工作（请注意，我将某些部分更新为最新的 Angular Material 版本）：
<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），下面的其他人都没有使用最新的更新。【参考方案7】：
对于角度材料版本：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>
上面的代码与angular material docs中给出的代码几乎相同，Js文件也与docs中给出的相似:)编辑：
更多参考：
1.https://gist.github.com/epelc/6aa345f4496776569830。将$media('gt-lg')的折旧值更正为$mdMedia('gt-sm')
2.https://github.com/angular/material/issues/1092
【讨论】：
【参考方案8】：上面的问题只需要修改css就解决了，根本不需要修改任何代码。
解决方案- .ng-范围高度：100%；
【讨论】：
【参考方案9】：<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>
测试
【讨论】：
【参考方案10】：我遇到了类似的问题。设置样式"height: 100vh;"为我工作。你也可以使用一个类。
<div layout="column" style="height:100vh;"></div>
layout="vertical" 也可以使用 - 它在我的上下文中没有任何显着影响。
【讨论】：
【参考方案11】：我尝试了很多方法来解决这个问题，我终于能够通过将 uiview 直接添加到我的菜单组件来解决它：
<menu uiview layout="column" class="menu"> </menu>
【讨论】：
【参考方案12】：我没有尝试使用指令进行其他修复，但我使用了这个简单的 css 并得到了我需要的东西。欢迎对此 CSS 进行任何更正或建议。
md-sidenav
height: -webkit-fill-available;
【讨论】：
以上是关于如何使用 Angular-Material 获得全高侧导航的主要内容，如果未能解决你的问题，请参考以下文章
如何创建响应式（可变列数）Angular-Material 卡片网格
如何从 angular-material2 对话框与其父级进行通信
Angular-Material：本机日期时间选择器组件，无秒
包装或扩展 angular-material 组件，允许将未知属性传递给子组件