如何隐藏角度2材质中的侧面导航栏

问题描述：

我正在尝试使用角度2材质创建响应侧面导航栏。我的侧面导航工作。它始终打开导航栏。如何在缩小屏幕尺寸时将其隐藏起来。如何隐藏角度2材质中的侧面导航栏

这是我的代码：

<md-sidenav-container style="width: 100%" onloadstart="false"> 
    <div class="flex-container" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="start"> 
    <md-toolbar color="primary"> 
     <md-icon>menu</md-icon> 
     <span>Profile</span> 
     <span class="example-fill-remaining-space"></span> 
     <span> 
     <button md-icon-button [mdMenuTriggerFor]="menu"><md-icon>more_vert</md-icon></button> 
     <md-menu #menu="mdMenu"> 
      <button md-menu-item><md-icon>swap_horiz</md-icon><span>toggle</span></button> 
      <button md-menu-item disabled><md-icon>person</md-icon><span>profile</span></button> 
      <button md-menu-item><md-icon>exit_to_app</md-icon><span>log out</span></button> 
     </md-menu> 
     </span> 
    </md-toolbar> 
    <md-sidenav-layout class="demo-sidenav-layout"> 
     <md-sidenav align="start" mode="side" opened> 
     <md-list> 
      <md-list-item> 
      <a routerLink="profile-home"><button md-button ><md-icon>home</md-icon> Home </button></a></md-list-item> 
      <md-list-item> 
      <a routerLink="profile-security"><button md-button ><md-icon>security</md-icon> Security </button></a></md-list-item> 
      <md-list-item> 
      <a routerLink="profile-settings"><button md-button ><md-icon>settings</md-icon>Settings </button></a></md-list-item> 
     </md-list> 
     </md-sidenav> 
     <router-outlet></router-outlet> 
    </md-sidenav-layout> 
    </div> 
</md-sidenav-container>

答

只是一个类添加到您的MD-sidenav，然后有一个类隐藏它时，屏幕够小。

在你的模板，将类添加到MD-sidenav

... 

<md-sidenav align="start" mode="side" opened class="hide-on-small-screens"> 
     <md-list> 
      <md-list-item> 

...

在你的CSS，实现你的类

... 

@media only screen and (max-width: 500px) { 
    .hide-on-small-screens { 
     display: none; 
    } 
} 

...

这将隐藏sidenav如果屏幕为500像素或更小。查询媒体查询了解如何使用此方法的更多信息。

如何隐藏角度2材质中的侧面导航栏

相关推荐