在Angular Material中，如何使md-sidenav始终打开

Question

可见切换按钮并随时关闭它？

我做了几次尝试但都失败了。

我上传了今天的图片，但它没有切换，只是在较低的分辨率下。

知道怎么做吗？

Answer 1

在material2中找到一种方法，我遇到了很多麻烦。最后，我发现这样阅读源代码：

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

Answer 2

您可以通过向其添加以下属性来保持导航栏对于您希望的任何视图：

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

检查Angular Docs以参考。

Answer 3

对于较新的版本，请将[opened]="true"添加到<md-sidenav>元素中

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

</md-sidenav>

Answer 4

请查看此代码段。基本上你可以使用$mdSidenav("sidenavId").toggle()来切换sidenav。

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>

Answer 5

唉，＃Gabriel的解决方案还不完整。来自描述https://material.angular.io/components/sidenav/api#MatSidenav

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

但是当你点击其中的某个元素（？）时，我们有3个选项可以关闭sidenav和3d。为了防止你需要覆盖回调或例如我曾经sidenav的响应式设计，这个答案对我有帮助https://github.com/angular/material2/issues/1130#issuecomment-299888690

在Angular Material中，如何使md-sidenav始终打开

问题描述投票：6回答：5

5个回答

最新问题

在Angular Material中，如何使md-sidenav始终打开

问题描述 投票：6回答：5

5个回答

最新问题

问题描述投票：6回答：5