时间戳

首页 > 解决方案 > 角度材料侧边栏显示水平

angular - 角度材料侧边栏显示水平

问题描述

我正在使用有角度的材料“MatSidenavModule”来显示侧面导航栏，我根据条件显示和隐藏显示它。单击显示时，我正在以水平格式而不是垂直格式获得侧边栏。

<mat-sidenav-container *ngIf="showSideBar">
  <mat-sidenav #sidenav>
    <mat-nav-list>

      <a mat-list-item > Accounts </a>
      <a mat-list-item > Create Account </a>
      <a mat-list-item > Contacts </a>
      <a mat-list-item > Create Contact </a>
      <a mat-list-item > Activities </a>
      <a mat-list-item > Create Activity </a>
      <a mat-list-item (click)="sidenav.toggle()" href="" mat-list-item>Close</a>

    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <div style="height: 88vh;">

    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

标签： angularangular-material

解决方案

你需要做一些改变。我向您展示了您需要替换的 html 示例：

<mat-sidenav-container >
  <mat-sidenav #sidenav opened mode=side> 
    <mat-nav-list>

      <a mat-list-item > Accounts </a>
      <a mat-list-item > Create Account </a>
      <a mat-list-item > Contacts </a>
      <a mat-list-item > Create Contact </a>
      <a mat-list-item > Activities </a>
      <a mat-list-item > Create Activity </a>
      <a mat-list-item (click)="sidenav.toggle()" href="" mat-list-item>Close</a>

    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <div style="height: 88vh;">
   temp
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

在这里，您必须设置属性模式以指定 sidenav 的行为。

我已经尝试过这个及其工作。请从页面中删除所有其他元素一次，看看它是否工作。并删除所有应用于此页面的 css。

推荐阅读