angularjs - example - sidebar angular
Cómo obtener un sidenav de altura completa con material angular (12)
Arreglé este mismo problema agregando una clase a mi sidenav con
position: fixed;
Estoy usando Angular-Material y he implementado un menú SideNav. Cuando el tamaño de la pantalla es pequeño, el menú está oculto y al hacer clic en el botón de alternar Menú, el menú se desliza desde la izquierda, con una altura de página completa. Cuando la pantalla es más grande, el menú aparece fijo al lado izquierdo, pero no a la altura completa de la página.
¿Cómo puedo hacer que el menú fijo parezca tener el máximo de página? He estado jugando con los atributos css y otros md, pero simplemente no puedo descubrir cómo.
<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>
y el controlador:
(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();
};
};
})();
El problema anterior se resolvió solo modificando css y no es necesario cambiar ningún código.
Solución- .ng-scope {altura: 100%; }
Esto funcionó para mí ...
1) Envuelva su sidenav en un div que tenga un layout = "vertical" como así ...
<div ng-include="''scripts/shared/sidenav/sidenav.html''" layout="vertical"></div>
2) Agregue "flex" en su sidenav para que se flexione y complete la altura de la página completa.
<md-sidenav class="md-sidenav-left md-whiteframe-z2" component-id="menu" is-locked-open="$mdMedia(''sm'')" flex>
Intenté muchas cosas para solucionar este problema, y finalmente pude solucionarlo agregando el uiview directamente a mi componente del menú: <menu uiview layout="column" class="menu"> </menu>
Intente agregar el atributo de layout-fill en la etiqueta principal md-content que tiene establecido el atributo ui-view .
<md-content ui-view layout-fill layout-align="center center">
</md-content>
Nada de lo anterior funcionó para mí para el material angular ver: 1.1.0-RC.5 , así que lo hice así:
<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>
El código anterior es casi el mismo que el que se da en los documentos de material angular y el archivo Js también es similar al que se da en los documentos :)
EDITAR:
Más referencias:
1. https://gist.github.com/epelc/6aa345f4496776569830 . Corrija el valor depreciado de $media(''gt-lg'') a $mdMedia(''gt-sm'')
2. https://github.com/angular/material/issues/1092
No probé las otras correcciones con directivas, pero utilicé este css simple y obtuve lo que necesitaba. Cualquier corrección o consejo sobre este css sería bienvenido.
md-sidenav {
height: -webkit-fill-available;
}
Simplemente crea un sidenav fuera de un <div> . Por ejemplo, justo después de la etiqueta <body> , podría escribir:
<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>
Este código te dará una barra lateral completamente vertical.
Tuve exactamente el mismo problema con el material angular 0.6.0 rc1. (Utilicé el código del sitio demo ).
El problema no proviene del código de material angular, sino del contenedor css principal de su página que no es de altura completa.
Tu página debe tener una estructura como:
<ui-view class="ng-scope">
<div ng-controller="appCtrl" layout="vertical" layout-fill>
... your md sidenav code here ...
</div>
</ui-view>
El problema viene de la clase ng-scope que no es de altura completa. En mi caso, solo copié / pegué el código del sitio de demostración y agregué esto en mi archivo css de cutom
.ng-scope { height: 100%; }
El resultado es un sidenav de altura completa que funciona bien tanto en el modo de apertura y desbloqueo bloqueado.
Tuve un problema similar. Estilo de configuración "altura: 100vh;" Trabajó para mí. También puedes usar una clase.
<div layout="column" style="height:100vh;"></div>
layout = "vertical" también se puede usar, no tiene ningún efecto significativo en mi contexto.
flex utilizar flex tanto en la barra lateral como en el contenido, así como en el contenedor superior. De esta manera no necesitas usar ningún estilo adicional.
Aquí está su código funcionando correctamente (tenga en cuenta que actualicé algunas partes de la última versión de Material Angular):
<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>
<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>
Prueba