Clever Geek Handbook

In Angular Material like md-sidenav always opens

visible toggle button and close it whenever I want?

I've made several attempts and failed.

I uploaded a picture like today, but it doesn't switch, only at lower resolutions.

Any idea how to do this?

enter image description here

+3


source to share


5 answers


I had a lot of trouble finding a way to do this in material2. Finally, I found this way by reading the source code:



<md-sidenav opened="true" disableClose="true">
+7


source


Please take a look at this code snippet. You can mainly use $mdSidenav("sidenavId").toggle()

sidenav to switch.



angular.module('materialApp', ['ngMaterial', 'ngAnimate'])

.controller('homeCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav) {
	$scope.toggleSideNav = function() {
		$mdSidenav('leftNav').toggle();
	};
}]);
      

        
        
        
      

    
.ma-sidenav {
	background: rgb(16,108,200);
}

.btn-row {
	padding-top: 30px;
	text-align: center;
}

.btn-toggle {
	display: inline-block;
}

.sidenav-item {
	padding: 10px 10px 10px 30px;
	color: white;
}
      

        
        
        
      

    
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>

<body ng-app="materialApp">
	<section ng-controller="homeCtrl">
		<md-sidenav class="md-sidenav-left md-whiteframe-z2 ma-sidenav" md-component-id="leftNav">
			<div class="sidenav-item">Item 1</div>
			<div class="sidenav-item">Item 2</div>
			<div class="sidenav-item">Item 3</div>
			<div class="sidenav-item">Item 4</div>
		</md-sidenav>

		<md-content flex layout-padding>
			<div class="btn-row">
				<md-button class="md-raised btn-toggle" ng-click="toggleSideNav()">Toggle SideNav</md-button>
			</div>
		</md-content>
	</section>
</body>
Run codeHide result


0


source


You can leave the Navbar open for any view if you like by adding the following attributes to it:

md-is-locked-open="$mdMedia('gt-md')"

Check Angular Docs for reference.

0


source


For newer versions add [opened]="true"

to the element<md-sidenav> 

<md-sidenav [opened]="true">

</md-sidenav>
0


source


Alas, #Gabriel's solution is incomplete. from the description https://material.angular.io/components/sidenav/api#MatSidenav

Whether the drawer can be closed with the escape key or by clicking on the backdrop.

but we have 3 options how to close sidenav

and 3d when you click on some element (?) in it. to prevent you need to override the callback or for example i used sidenav

for responsive design and this answer was helpful to me https://github.com/angular/material2/issues/1130#issuecomment-299888690

0


source






More articles:


All Articles