大佬教程收集整理的这篇文章主要介绍了angularjs – 如何获得一个完整的高度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,menuCtrl]); function menuCtrl($scope,$mdSidenav) { var vm = this; $scope.close = function() { $mdSidenav('menu').close(); }; }; })();
问题不是来自角材料代码,而是来自您的页面的父css容器,不是全高度。
您的网页应该有以下结构:
<ui-view class="ng-scope"> <div ng-controller="appCtrl" layout="vertical" layout-fill> ... your md sidenav code here ... </div> </ui-view>
问题来自ng范围类,它不是全高。在我的情况下,我只是复制/从demo site代码和添加这个im我的cutom css文件
.ng-scope { height: 100%; }
结果是在锁定打开和解锁模式下,全高度sidenav工作正常。
以上是大佬教程为你收集整理的angularjs – 如何获得一个完整的高度sidenav与角材料全部内容,希望文章能够帮你解决angularjs – 如何获得一个完整的高度sidenav与角材料所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。