Angular 6- Material sidenav水平卷轴
Angular 6- Material sidenav水平卷轴
提问于 2018-08-18 01:54:41
在Angular 6中，我使用了material side-nav &也使用了material-tree：
父级：
<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。使用material-tree，它可能会超出我设置的宽度(240px)。
Material的mat-side-nav似乎不支持水平滚动。如果文件夹结构超过宽度，则sidenav仅使用分词，不允许水平滚动。
正在尝试启用mat-side-nav中的水平滚动...
更新:尝试使用“空格: nowrap”来设置样式。仅当添加到顶层(mat-sidenav)时才会影响任何内容。然后启用了滚动--但生成了以下内容：
任何数量的css似乎都无法扩展宽度以满足溢出。
回答 2
Stack Overflow用户
发布于 2018-08-18 04:44:19
最有可能的是，这是节点组件本身，而不是sidenav。尝试向mat-tree-node类添加white-space:no-wrap;。根据sidenav抽屉中的内容，您可能需要在其他地方添加非换行，或者控制布局，以便父组件可以显示水平滚动条。
Stack Overflow用户
发布于 2018-08-22 02:22:45
当前有效的(但可能不是最好的)解决方案--感谢@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的大小，定期关闭文件夹，不需要滚动-需要时启用滚动。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51900687
复制相关文章
相似问题
腾讯云开发者
