Angular material md-sidenav 根据屏幕大小设置 md-is-open 值
Angular material md-sidenav set md-is-open value based on screen size
我正在尝试根据屏幕尺寸设置 md-is-open。类似于 $mdMedia('gt-sm')。对于 md-is-locked-open 可以用 $mdMedia('gt-sm') 设置,但不知道为什么 md-is-open 不能用那个设置。目前我的代码看起来像:
<md-sidenav md-is-open="$mdMedia('gt-sm')"></md-sidenav>
根据docs,md-is-open
属性可以是
A model bound to whether the sidenav is opened.
因此,您可以在控制器中定义一个模型并将其分配给 md-is-open
属性,例如
// Controller
$scope.shouldLeftBeOpen = $mdMedia('gt-sm');
你可以像这样使用它
<md-sidenav class="md-sidenav-left" md-component-id="left" md-is-open="shouldLeftBeOpen"></md-sidenav>
这是一个工作 codepen。当您从宽度小于 960px 的设备加载页面时,sidenav 将不会打开。
我正在尝试根据屏幕尺寸设置 md-is-open。类似于 $mdMedia('gt-sm')。对于 md-is-locked-open 可以用 $mdMedia('gt-sm') 设置,但不知道为什么 md-is-open 不能用那个设置。目前我的代码看起来像:
<md-sidenav md-is-open="$mdMedia('gt-sm')"></md-sidenav>
根据docs,md-is-open
属性可以是
A model bound to whether the sidenav is opened.
因此,您可以在控制器中定义一个模型并将其分配给 md-is-open
属性,例如
// Controller
$scope.shouldLeftBeOpen = $mdMedia('gt-sm');
你可以像这样使用它
<md-sidenav class="md-sidenav-left" md-component-id="left" md-is-open="shouldLeftBeOpen"></md-sidenav>
这是一个工作 codepen。当您从宽度小于 960px 的设备加载页面时,sidenav 将不会打开。