Как получить полный рост sidenav с помощью Angular -Материал
Я использую Angular -Материал и реализовал меню 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
У меня была такая же проблема с angular -material 0.6.0 rc1. (Я использовал код из демонстрационного сайта ).
Проблема возникает не из angular -материала кода, а из родительского контейнера css вашей страницы, который не является полной высотой.
Ваша страница должна иметь такую структуру, как:
<ui-view class="ng-scope">
<div ng-controller="appCtrl" layout="vertical" layout-fill>
... your md sidenav code here ...
</div>
</ui-view>
Проблема возникает из класса ng-scope, который не является полной высотой. В моем случае я просто копирую/миную код из демонстрационного сайта и добавляю этот файл im cccc ccc
.ng-scope { height: 100%; }
В результате получается полная высота sidenav, работающая нормально в режиме блокировки и разблокировки.
Ответ 2
Это сработало для меня...
1) Оберните свой сиденав в div, который имеет макет = "вертикальный", как это...
<div ng-include="'scripts/shared/sidenav/sidenav.html'" layout="vertical"></div>
2) Добавьте "flex" в свой sidenav, чтобы он согнулся, чтобы заполнить всю высоту страницы.
<md-sidenav class="md-sidenav-left md-whiteframe-z2" component-id="menu" is-locked-open="$mdMedia('sm')" flex>
Ответ 3
Я исправил эту же проблему, добавив класс в мой sidenav с помощью
position: fixed;
Ответ 4
Попробуйте добавить атрибут layout-fill на главный тег md-content, у которого есть атрибут ui-view.
<md-content ui-view layout-fill layout-align="center center">
</md-content>
Ответ 5
У меня была аналогичная проблема. Установка стиля "height: 100vh;" работал у меня. Вы также можете использовать класс.
<div layout="column" style="height:100vh;"></div>
layout = "vertical" также может использоваться - он не имеет значительного эффекта в моем контексте.
Ответ 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>
Ответ 7
Просто создайте sidenav за пределами <div>. Например, сразу после тега <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>
Этот код даст вам полностью вертикальную боковую панель.
Ответ 8
Ни один из вышеперечисленных не работал у меня для материала angular ver: 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, а файл Js также похож на файл, указанный в документах:
EDIT:
Дополнительные ссылки:
1. https://gist.github.com/epelc/6aa345f4496776569830. Исправьте обесцененное значение $media('gt-lg') на $mdMedia('gt-sm')
2. https://github.com/angular/material/issues/1092
Ответ 9
Вышеупомянутая проблема была решена только путем изменения css и вообще не нужно менять какой-либо код.
решение-
.ng-scope {height: 100%; }
Ответ 10
<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>
Тест
Ответ 11
Я испробовал так много всего, чтобы исправить эту проблему, и я, наконец, смог ее исправить, добавив uiview непосредственно в свой компонент меню:
<menu uiview layout="column" class="menu"> </menu>
Ответ 12
Я не пробовал другие исправления с директивами, но я использовал этот простой css и получил то, что мне нужно. Любые исправления или советы по поводу этого css будут приветствоваться.
md-sidenav {
height: -webkit-fill-available;
}
