1

在 Angular 6 中，我使用材质侧导航 & 也使用材质树：

家长：

<mat-sidenav-container class="sidenav-container" autosize>

  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="false"
    [mode]="sidenavMode"
    [opened]="sideNavOpen"
    (closed)="sideNavOpen = false"
    [ngClass]=" !sideNavOpen ? 'showToggle' : '' ">  

    <app-side-nav (toggledSidebarCollapse)="toggleSideBar()"></app-side-nav>

  </mat-sidenav>

  <mat-sidenav-content
    autosize
    fullscreen
    [style.height.px]="windowHeight()"
    [ngClass]=" !sideNavOpen ? 'body-conainer_collapse-view' : 'body-conainer_open-view' "
    color="primary">

    <mat-toolbar >

      <span>HOME</span>
    </mat-toolbar>

    <ng-container *ngIf="iframeDisplay">
      <iframe width="100%" height="100%" [src]="iframeUrl | safeUrl" scrolling="yes"></iframe>
    </ng-container>


  </mat-sidenav-content>

</mat-sidenav-container>

孩子：

<div class="header" fxLayout="row" fxLayoutAlign="start center">

  ...

<div class="mat-tree_container">  
  <mat-nav-list>
    <mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="tree">

      <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
        <a class="mat-tree-node link-item">
          <button class="side-bar-button" mat-icon-button>
            <mat-icon class="mat-icon-rtl-mirror">
              insert_drive_file
            </mat-icon>
          </button>
          {{node.reportName}}
        </a>
      </mat-tree-node>

      <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
        <li>
          <div class="mat-tree-node">
            <button class="side-bar-button" mat-icon-button matTreeNodeToggle
                    [attr.aria-label]="'toggle ' + node.reportName">
              <mat-icon class="mat-icon-rtl-mirror">
                {{nestedTreeControl.isExpanded(node) ? 'folder_open' : 'folder'}}
              </mat-icon>
            </button>
            {{node.reportName}}
          </div>
          <ul [class.tree-invisible]="!nestedTreeControl.isExpanded(node)">
            <ng-container matTreeNodeOutlet></ng-container>
          </ul>
        </li>
      </mat-nested-tree-node>

    </mat-tree>
  </mat-nav-list> 
</div>

然而，我得到的数据是动态的。它可能嵌套 x 深度。使用材质树，可以超出我设置的宽度（240px）。

Material 的 mat-side-nav 似乎不支持水平滚动。如果文件夹结构通过宽度，sidenav 只是使用分词，不允许水平滚动。

在此处输入图像描述

只是试图在 mat-side-nav 内启用水平滚动...

更新：尝试对样式使用“空白：nowrap”。如果添加到顶层（mat-sidenav），只会影响任何东西。然后启用了滚动——但产生了以下结果： 在此处输入图像描述

没有多少 css 出现扩展宽度以满足溢出。

4

2 回答 2

2

最有可能的是，这是节点组件本身，而不是 sidenav。尝试添加white-space:no-wrap;到mat-tree-node班级。根据 sidenav 抽屉内的内容，您可能需要在其他地方添加 no-wrap 或以其他方式控制布局，以便父组件可以显示水平滚动条。

于 2018-08-17T20:44:18.550 回答
0

当前有效（但可能不是最佳）解决方案——感谢@gtranter 的回复。

mat-sidenav {
  ...  
  white-space: nowrap;
  display: flex;
}
...
// for the width of the header -- if not increased - does not fill the space 
    especially after the sidebar width increases when opening folders
.header {
  ...
  width: calc(100% + 55px);
  ...
}

当您继续打开新文件夹时，这允许水平滚动和调整到新的大小 - 没有可预见的限制。在没有滚动的情况下定期使用关闭的文件夹来调整 sidenav 的大小 - 需要时启用滚动。

于 2018-08-21T18:22:44.773 回答